.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ========================= BrowserMaps Tutorial (en) ========================= :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed by: dirk :Changed: 2015-03-15T23:27:07 :Classification: browser_tut_map_en :Description: [DEPRECATED] Please refer to the BrowserMaps Leaflet Tutorial. This tutorial should be proper, if you are using the deprecated oxMap modul. Publish your routes, paths and POI with GoogleMaps and OpenStreetMap! Update the geocoding of any address. Configure BrowserMaps with the Constant Editor. Use BrowserMaps with your own database, TYPO3 Organiser or TYPO3 Route. :Keywords: forDevelopers, forIntegrators, browser, map, browsermaps, open street map, openstreetmap, googlemaps :Author: Dirk Wildt, Die Netzmacher :Email: http://wildt.at.die-netzmacher.de :Website: http://die-netzmacher.de :Language: en |img-1| |img-2| extKey: browser\_tut\_map\_en |img-3| .. _BrowserMaps-Tutorial-en: BrowserMaps Tutorial (en) ========================= [DEPRECATED] Please refer to the BrowserMaps Leaflet Tutorial. This tutorial should be proper, if you are using the deprecated oxMap modul. Publish your routes, paths and POI with GoogleMaps and OpenStreetMap! Update the geocoding of any address. Configure BrowserMaps with the Constant Editor. Use BrowserMaps with your own database, TYPO3 Organiser or TYPO3 Route. |img-4| Version: 7.0.1, 2015-03-015 - Version is corresponding with the version of the Browser. Extension Key: browser\_tut\_map\_en - Tutorial for the extension Browser (extkey: browser) Language: en Keywords: forDevelopers, forIntegrators, browser, map, browsermaps, open street map, openstreetmap, googlemaps Copyright 2012-2015, Dirk Wildt, Die Netzmacher, **This tutorial is deprecated.Please refer to BrowserMaps Leaflet Tutorial.** **Good news: oxMap is supported by the Browser 7.xIf you are using oxMap `:sup:`0` <#sdfootnote1sym>`_ , this tutorial should be proper** This document is published under the Open Content License available from `http://www.opencontent.org/opl.shtml `_ The content of this document is related to TYPO3 - a GNU/GPL CMS/Framework available from `www.typo3.org `_ .. _Table-of-Contents: Table of Contents ----------------- `BrowserMaps Tutorial (en) 1 <#__RefHeading__12229_1904948122>`_ `Screenshots 4 <#__RefHeading__12239_1904948122>`_ `Frontend 4 <#__RefHeading__835_1945474054>`_ `Backend 7 <#__RefHeading__837_1945474054>`_ `Introduction 9 <#__RefHeading__839_1945474054>`_ `Good news: oxMap is supported by the Browser 7.xIf you are using oxMap, this tutorial should be proper 9 <#__RefHeading__28467_658755630>`_ `What does the Tutorial do? 9 <#__RefHeading__12241_1904948122>`_ `What does BrowserMaps do? 9 <#__RefHeading__12243_1904948122>`_ `What do you need? 10 <#__RefHeading__1087_888364954>`_ `Further Information 11 <#__RefHeading__12245_1904948122>`_ `Workflow 12 <#__RefHeading__9994_1220902622>`_ `Other map applications 12 <#__RefHeading__11598_2050094349>`_ `BrowserMaps 12 <#__RefHeading__11600_2050094349>`_ `Terminology 13 <#__RefHeading__1089_888364954>`_ `Quick Installation 14 <#__RefHeading__11602_2050094349>`_ `Own database 14 <#__RefHeading__18164_2050094349>`_ `Ready for use extensions 14 <#__RefHeading__18166_2050094349>`_ `Installation 15 <#__RefHeading__1091_888364954>`_ `Base 15 <#__RefHeading__2626_493732561>`_ `Preconditions 15 <#__RefHeading__2628_493732561>`_ `Pages 15 <#__RefHeading__2634_493732561>`_ `TypoScript 16 <#__RefHeading__19772_1598829922>`_ `Plugin / Flexform 19 <#__RefHeading__3140_493732561>`_ `Snippets 20 <#__RefHeading__5023_91639442>`_ `Custom Image Layer 20 <#__RefHeading__2726_450683128>`_ `Draft for a link to a single view 23 <#__RefHeading__19774_1598829922>`_ `Google Maps and OpenStreetMap 24 <#__RefHeading__5112_1266338921>`_ `Route 24 <#__RefHeading__24022_1598829922>`_ `Controlling 25 <#__RefHeading__2642_493732561>`_ `HTML 25 <#__RefHeading__1093_888364954>`_ `CSS 25 <#__RefHeading__1097_888364954>`_ `JSS 25 <#__RefHeading__1099_888364954>`_ `TypoScript 26 <#__RefHeading__1105_888364954>`_ `Automatic Geocoding 30 <#__RefHeading__24024_1598829922>`_ `Google Geocoding API 30 <#__RefHeading__24026_1598829922>`_ `Restricted Privacy 30 <#__RefHeading__24028_1598829922>`_ `Configuration 30 <#__RefHeading__22721_1598829922>`_ `Reference 31 <#__RefHeading__24030_1598829922>`_ `Scheduled task (cron job) 33 <#__RefHeading__24032_1598829922>`_ `DRS – Development Reporting System 37 <#__RefHeading__22365_1730107939>`_ `Inspect work-flow and errors 37 <#__RefHeading__1483_1099177487>`_ `Enabling the DRS 37 <#__RefHeading__1485_1099177487>`_ `The DRS report 38 <#__RefHeading__1487_1099177487>`_ `Reference 39 <#__RefHeading__5025_91639442>`_ `plugin.tx\_browser\_pi1 39 <#__RefHeading__765_1945474054>`_ `Map: global and local 39 <#__RefHeading__4560_91639442>`_ `plugin.tx\_browser\_pi1.navigation.map 39 <#__RefHeading__4562_91639442>`_ `Legal Notice 45 <#__RefHeading__8770_393827555>`_ `Google Maps 45 <#__RefHeading__8772_393827555>`_ `OpenStreetMap 45 <#__RefHeading__8774_393827555>`_ `What's new? 46 <#__RefHeading__19729_895802801>`_ `Version 4.6 46 <#__RefHeading__9996_1220902622>`_ `Version 4.5 46 <#__RefHeading__9998_1220902622>`_ `Version 4.4 47 <#__RefHeading__8784_393827555>`_ `Version 4.3 47 <#__RefHeading__21760_895802801>`_ `Version 4.1 47 <#__RefHeading__16715_2101702063>`_ `Update 48 <#__RefHeading__8782_393827555>`_ `From Version < 4.6 to 4.6 48 <#__RefHeading__10000_1220902622>`_ `Development 52 <#__RefHeading__10002_1220902622>`_ `Workflow 52 <#__RefHeading__12144_1399488297>`_ `Coding 52 <#__RefHeading__12146_1399488297>`_ `Using the map API without TYPO3 54 <#__RefHeading__14600_39746679>`_ `oxMap 54 <#__RefHeading__21762_895802801>`_ `Credits 55 <#__RefHeading__21764_895802801>`_ `BrowserMaps Developer Team 56 <#__RefHeading__3212_1137088666>`_ `FAQ 57 <#__RefHeading__12148_1399488297>`_ `Illegal character in a JSON array? 57 <#__RefHeading__673_203744830>`_ `May I use AJAX? 57 <#__RefHeading__669_203744830>`_ `Forum 58 <#__RefHeading__11300_144712033>`_ `Known Bugs 59 <#__RefHeading__2670_493732561>`_ `Conflict with AJAX 59 <#__RefHeading__3485_667608290>`_ `To-Do List 60 <#__RefHeading__12315_1904948122>`_ `Change Log 61 <#__RefHeading__12317_1904948122>`_ `Illustration Index 64 <#__RefHeading__3367_450683128>`_ .. _Screenshots: Screenshots ----------- .. _Frontend: Frontend ^^^^^^^^ .. _typo3-organiser-de: typo3-organiser.de """""""""""""""""" .. _List-view: List view ~~~~~~~~~ |img-5| |img-5| Live at `http://typo3-organiser.de/standorte/ `_ .. _Single-view: Single view ~~~~~~~~~~~ |img-5| |img-5| Live at `http://typo3-organiser.de/standorte/?tx\_browser\_pi1[headqua rtersUid]=2 `_ .. _typo3-route-de: typo3-route.de """""""""""""" |img-5| Live example - with OpenStreetMap at `http://typo3-route.de/openstreetmap/ `_ - with Google Maps at `http://typo3-route.de/ `_ .. _BrowserMaps-with-own-corporate-identity: BrowserMaps with own corporate identity """"""""""""""""""""""""""""""""""""""" .. _Bauhaus-University-Weimar: Bauhaus University Weimar ~~~~~~~~~~~~~~~~~~~~~~~~~ |img-5| |img-5| Live at `http://typo3-browser.de/maps/weimar/ `_ .. _Companies-in-Thuringia: Companies in Thuringia ~~~~~~~~~~~~~~~~~~~~~~ |img-5| |img-5| Live at `http://typo3-browser.de/maps/leg/ `_ .. _Backend: Backend ^^^^^^^ .. _TypoScript-Constant-Editor: TypoScript Constant Editor """""""""""""""""""""""""" |img-5| .. _Category-icons: Category icons """""""""""""" |img-5| The Browser Map Module is able to manage different icons for the map legend and inside the map (points). For example: You can take the first icon for the legend and the second icon for the map. .. _Automatic-Geocoding: Automatic Geocoding """"""""""""""""""" |img-5| See details at section "Automatic Geocoding" on page 30 below. .. _Introduction: Introduction ------------ **This tutorial is deprecated.Please refer to the BrowserMaps Leaflet Tutorial.** **Good news: oxMap is supported by the Browser 7.xIf you are using oxMap `:sup:`0` <#sdfootnote2sym>`_ , this tutorial should be proper** .. _What-does-the-Tutorial-do: What does the Tutorial do? ^^^^^^^^^^^^^^^^^^^^^^^^^^ This is a tutorial for the extension Browser (extkey: browser). It is only a step-by-step introduction for using BrowserMaps (supported by OpenStreetMap) If you are interested in other issues, please note the section "Further Informations" below. .. _What-does-BrowserMaps-do: What does BrowserMaps do? ^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Features: Features """""""" - You can publish your data supported by both interactive maps – Google Maps and OpenStreetMap. - BrowserMaps can display maps with marker (POI) and maps with routes. Routes are paths with marker (POI). - BrowserMaps hasn't any own database. You can use BrowserMaps with - your own database or - ready to use extensions like - TYPO3 Organiser and - TYPO3 Route - BrowserMaps takes care off privacy: address data aren't sent to Google Maps or OpenStreetMap. - BrowserMaps is able to geocode your address data `:sup:`0` <#sdfootnote3sym>`_ - while editing and - by a scheduled task If you are using automatic geocode, privacy is restricted. - You can use BrowserMaps optimized for touch-screens `:sup:`0` <#sdfootnote4sym>`_ . - You are controlling BrowserMaps by - the plugin of the Browser – TYPO3 without PHP, - the TypoScript Constant Editor, - TypoScript directly and - CSS. - Your configuration will evaluated by the first tab of the Browser plugin [Plugin Check]. - The work-flow of BrowserMaps will reported by the DRS – the Development Reporting System – and will prompted to syslog. .. _The-six-ideas: The six ideas """"""""""""" |img-6| Illustration 13: Six good ideas You can use Google Maps and OpenStreetMap. You can use it with your own design.Individual icons for map points and the map filter form. Individual Pop-Ups The values of the map filter form are from your category table. Map-, list- and single-view of your data. Search form, more filter and an index browser. From 1. to 6. see the illustration on the right hand. .. _What-do-you-need: What do you need? ^^^^^^^^^^^^^^^^^ - Your records must have an address and fields for latitude and longitude at least. - If you like a legend with categories, your data must be categorised. - If you like your own icons, your category table has to contain the icons. - BrowserMaps is a module of the Browser – TYPO3 without PHP.You have to install the Browser – TYPO3 without PHP – only. - If you like to use BrowserMaps ready to use – with the extensions TYPO3 Organiser or TYPO3 Route – you need small experience with TYPO3. - If you like to use your own database and publish your data with Browser Maps you need experience with TYPO3 integration, TypoScript and the extension Browser – TYPO3 without PHP. .. _Further-Information: Further Information ^^^^^^^^^^^^^^^^^^^ |img-7| Illustration 14: BrowserMaps flyer (German) BrowserMaps Flyer Download the BrowserMaps flyer in German language. See `http://typo3-browser.de/browsermaps-flyer/ `_ .. _600-pages-manual-and-tutorials: 600 pages manual and tutorials """""""""""""""""""""""""""""" The Browser – TYPO3 without PHP – has more than 600 pages documentation (manual and tutorials). See: `http://typo3-browser.de/en/browser-tutorials/ `_ .. _Workflow: Workflow -------- .. ### BEGIN~OF~TABLE ### .. _img-5: |img-5| ^^^^^^^ .. container:: table-row a |img-5| b |img-5| .. _Other-map-applications: Other map applications ^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a Other map applications ^^^^^^^^^^^^^^^^^^^^^^ The most other application sends the address data to the Google Maps API. The Google Maps API create a map with the address data / marker (POI) integrated The user gets a Google Maps. b BrowserMaps ^^^^^^^^^^^ BrowserMaps pull the needed map without any address data / marker (POI) - from Google Maps without using the Google Maps API or - from OpenStreetMap BrowserMaps lays a slide with the address data / marker (POI) over the map. Optionally BrowserMaps lays a slide with your corporate design between the map and the marker slide. Optionally BrowserMaps adds a slide with paths. This technic is enabled by OpenLayers `:sup:`0` <#sdfootnote5sym>`_ and oxMap `:sup:`0` <#sdfootnote6sym>`_ . .. _Google-Maps-API-Features: Google Maps API Features ^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a Google Maps API Features """""""""""""""""""""""" The application can use features of the Google Maps API. b No API Feature """""""""""""" BrowserMaps can't use any feature of the Google Maps API. .. _No-Privacy: No Privacy ^^^^^^^^^^ .. container:: table-row a No Privacy """""""""" Google Maps knows your data. b Privacy """"""" The map provider doesn't know, which data will provided with the map. .. _Licence: Licence ^^^^^^^ .. container:: table-row a Licence """"""" If you are using the Google Maps API like in the example above, the using of Google Maps is limited. `:sup:`0` <#sdfootnote7sym>`_ b Licence """"""" The using of the maps delivered by Google Maps or OpenStreetMap is unlimited. `:sup:`0` <#sdfootnote8sym>`_ .. ###### END~OF~TABLE ###### .. _Terminology: Terminology ----------- Marker (POI) - A marker (POI) is a point like a flag within a map. - A marker (POI) has this properties among others: - Geo position - Icon - A popup with an abstract in a text format or HTML format. HTML can contain links and images among others. - Category. You can display or hide categories by the category form: all marker with the current category will displayed or hidden. - Click or Hover - Click mode– A mouse click displays or hides a popup.– If the marker should link to a detailed view, the popup has to contain the link to the detailed view. - Hover mode:– A mouse over displays or hides a popup.– A mouse click forwards to the detailed view. Route A Route has the properties: - marker (see marker above). Marker (POI) are connected with the path. If you hide the path, the marker will hidden too. - path (see path below). Path - A path is a line like a route, track or way within a map. - A path has this properties among others: - Geo positions. At least a geo position for the start and a geo position for the end. - Color - Thickness - Icon and the geo position of the icon. - Category. You can display or hide categories by the category form: all paths with the current category will displayed or hidden – all connected marker will be displayed or hidden too. POI – point of interest A point of interest is nothing else than a marker. See marker above. .. _Quick-Installation: Quick Installation ------------------ .. _Own-database: Own database ^^^^^^^^^^^^ - If the address records of your database don't have fields for the latitude and for the longitude, please extend your database. - Create a TypoScript template for the TYPO3 Browser. - Enable and configure BrowserMaps with the TypoScript Constant Editor Category: [BROWSERMAPS - ...] - Disable AJAX in the Browser plugin/flexform: - tab [Single View] > field "Record Browser": [disabled] - tab [jQuery & AJAX] > field "AJAX": [disabled] .. _Ready-for-use-extensions: Ready for use extensions ^^^^^^^^^^^^^^^^^^^^^^^^ Install - TYPO3 Organiser with the Organiser Installer or - TYPO3 Route Follow the manuals. .. _Installation: Installation ------------ .. _Base: Base ^^^^ The installation – this tutorial – is based on the headquarters template of the TYPO3 extension Organiser `:sup:`0` <#sdfootnote9sym>`_ . If you are using the Organiser, you need to include the static template of the Organiser only. You don't need to configure the TypoScript manually. You can installe the Organiser with sample data ready for use with one mouse click. See `http://typo3-organiser.de/ `_ If you are interested in the templates only, please refer to the Organiser files: static/headquarters/501/\* `http://forge.typo3.org/projects/extension- org/repository/show/trunk/static/headquarters/501 `_ You need the Organiser from version 3.3.2 .. _Preconditions: Preconditions ^^^^^^^^^^^^^ .. _Latitude-and-longitude: Latitude and longitude """""""""""""""""""""" Your records must have both data: a latitude and a longitude. .. _Categories-optional: Categories (optional) """"""""""""""""""""" If you like a legend with categories, your records must be categorised. If you like a legend with individual category icons, your category table must be able to manage the category icons: it must have an image field. .. _Pages: Pages ^^^^^ Please add a page for publishing the map. You must have a folder with your data. .. _Example: Example """"""" |img-5| You will have a page tree like in the illustration above: - Page Headquarters `:sup:`0` <#sdfootnote10sym>`_ [1277] - Folder Headquarters `:sup:`0` <#sdfootnote11sym>`_ [1284] .. _TypoScript: TypoScript ^^^^^^^^^^ Add to your page Headquarters [1277] a TypoScript extension template. Call it +page\_headquarters\_ *xxx* , where *xxx* is the id of your TypoScript template. `:sup:`0` <#sdfootnote12sym>`_ .. _Constant-Editor: Constant Editor """"""""""""""" Please configure BrowserMaps with the TypoScript Constant Editor. |img-5| Module: Web > Template Page tree: Your page, which contains the Browser pluginand should display an OpenStreetMap Edit area: [Constant Editor] .. _Controlling: Controlling ~~~~~~~~~~~ Category: [BROWSERMAPS – CONTROLLING] - Enable the map: here [Map]. Map with marker only. `:sup:`0` <#sdfootnote13sym>`_ - Map Provider Google Maps or OpenStreetMap. Please take care of the licences! Copyright must be visible! .. _Database: Database ~~~~~~~~ Category: [BROWSERMAPS – DATABASE MARKER] - table.field with record uidhere: tx\_org\_headquarters.uid - table.field with the latitudehere: tx\_org\_headquarters.mail\_lat - table.field with the longitudehere: tx\_org\_headquarters.mail\_lon - table.field with the contenthere: tx\_org\_headquarters.title - table.field with the categoryhere: tx\_org\_headquarterscat.title - table.field with the category iconshere: tx\_org\_headquarterscat.icons - table.field with category x-offsethere: tx\_org\_headquarterscat.icon\_offset\_x - table.field with category y-offsethere: tx\_org\_headquarterscat.icon\_offset\_y .. _Design: Design ~~~~~~ Category: [BROWSERMAPS – DESIGN] Icons directoryhere: uploads/tx\_org/ .. _Icons: Icons ~~~~~ Category: [BROWSERMAPS – ICONS] - Position of map icon (list view)Position of the icon in the table.field with the category icons. 1st position: 0. 2nd position: 1. 3rd position: 2. ...here: 1 - Position of map icon (single view)Position of the icon in the table.field with the category icons. 1st position: 0. 2nd position: 1. 3rd position: 2. ...here: 2 .. _Aliases: Aliases ~~~~~~~ Category: [BROWSERMAPS – ALIASES] If you are using an alias for showUid, please configure: Label of a marker uidhere: headquartersUid .. _Setup: Setup """"" Please configure your setup directly. See examples below. BrowserMaps is a module of the Browser – TYPO3 without PHP. If you like to know, how to configure the setup in general, please refer to the manual of the Browser. See `http://typo3.org/extensions/repository/view/browser\_manual\_en/ `_ .. _List-view: List view ~~~~~~~~~ plugin.tx\_browser\_pi1 { ... views { list { 501 = +Org: Headquarters 501 { ... showUid = headquartersUid select ( tx\_org\_headquarters.title, ... tx\_org\_headquarters.mail\_lat, tx\_org\_headquarters.mail\_lon, tx\_org\_headquarterscat.title, tx\_org\_headquarterscat.icons tx\_org\_headquarterscat.icon\_offset\_x, tx\_org\_headquarterscat.icon\_offset\_y ) navigation { map < plugin.tx\_browser\_pi1.navigation.map map { marker { variables { system { description > description < plugin.tx\_browser\_pi1.displayList.master\_templates.ma p.descriptionWiLinkToSingle } } } } } } } } Line 12 to 13: You need the values for the latitude and the longitude at least. Line 14 to 17: If you like a legend, you need the category labels. Line 15: And if you like the icons from the database, you need the category icons. Line 20: Copy the map master template to your list view. Line 25 to 26: Copy the master template for a pop up witha short description and a link to the single view. .. _Single-view: Single view ~~~~~~~~~~~ plugin.tx\_browser\_pi1 { ... views { ... single { 501 { ... showUid = headquartersUid select ( tx\_org\_headquarters.title, ... tx\_org\_headquarters.mail\_lat, tx\_org\_headquarters.mail\_lon, tx\_org\_headquarterscat.title, tx\_org\_headquarterscat.icons ) navigation { map < plugin.tx\_browser\_pi1.navigation.map map { marker { variables { system { description > description < \plugin.tx\_browser\_pi1.displayList.master\_templates.m ap.descriptionWiLinkToSingle } } } } } } } } } Line 12 to 13: You need the values for the latitude and the longitude. Line 14 to 15: If you want to use the icon from the database, you need the values for the category labeland the category icon. Line 18: Copy the map master template to your list view. Line 23 to 24: Copy the master template for a pop up witha short description and a link to the single view. .. _Plugin-Flexform: Plugin / Flexform ^^^^^^^^^^^^^^^^^ Add to your page Headquarters [1277] the Browser – TYPO3 without PHP - plugin. .. _Configuration: Configuration """"""""""""" - Tab [General] - Header: [Browser for my Headquarters] - [Don't display any header] - Tab [Plugin] - Tab [Single View] Record Browser: [disabled] - Tab [Templating] HTML: [Browser Main (browser)] - Tab [jQuery & AJAX] Ajax: [disabled] - Tab [Behaviour] Record Storage Pagehere: folder Headquarters [1284] .. _Evaluation: Evaluation """""""""" Please evaluate the result of your configuration: Tab [Plugin] Tab [Plugin Check] .. _Snippets: Snippets -------- .. _Custom-Image-Layer: Custom Image Layer ^^^^^^^^^^^^^^^^^^ If you like, you can use a custom image layer. The custom image layer will be laid between Google Maps or OpenStreetMap and your data. |img-5| |img-5| Live examples: - `http://typo3-browser.de/maps/weimar/ `_ - `http://typo3-browser.de/maps/leg/ `_ .. _Upload-the-Image-Layer: Upload the Image Layer """""""""""""""""""""" The image layer should be a png file because of performance. A vector file isn't recommended. If you like different solutions for different zoom levels, you need different files. For older browsers png files are recommended in every case, because they can't render vector files. Probably you need a cartographer for creating the needed files. Please upload your files to a user defined directory. Example user\_upload/my\_openstreetmap .. _TypoScript: TypoScript """""""""" You have to extend the JavaScript code with the configuration for a custom image layer. .. _Constant-Editor: Constant Editor ~~~~~~~~~~~~~~~ Please edit your constants with the TypoScript Constant Editor! See next section. plugin.tx\_browser\_pi1 { map { design { height = 620 width = 715 } openlayers { modules { default = 'OSM.CDmap,OSM.Base,OSM.Filter' debugging = 'Error,OSM.CDmap,OSM.Base,OSM.Filter' } } zoomLevel { max = 3 mode = fixed levels = 3 start = 14 } } } Line 9 and 10: You need the module OSM.CDmap. Without this module the array custom {} (see below) will ignored. Line 14 and 16: Number of levels with an own designed map. .. _Setup: Setup ~~~~~ plugin.tx\_browser\_pi1 { views.list.501.navigation.map.marker.snippets.html.dynamic.map\_jss.30 .20 { value ( language : '###OXMAPCONFIGLANGUAGE###' // default \| en \| de , wms : '###OXMAPCONFIGWMS###' // OSM , type : '###OXMAPCONFIGTYPE###' // Mapnik \| ROADMAP , modules : '###OXMAPCONFIGMODULES###' // Error, OSM, OSM.CDmap, OSM.Filter , imagePath : '###OPENLAYERSIMGPATH###' , cssPath : '###OPENLAYERSCSS###' , mapId : '{$plugin.tx\_browser\_pi1.map.html.id}' , mapControls : '###OXMAPCONFIGMAPCONTROLS###' , zoomWheelEnable : '###OXMAPCONFIGZOOMWHEELENABLE###' , filter : { wrapper : '{$plugin.tx\_browser\_pi1.map.html.form.id}' } , center : '###OXMAPCONFIGCENTER###' , startLevel : '###OXMAPCONFIGSTARTLEVEL###' , numZoomLevels : '###OXMAPCONFIGNUMZOOMLEVELS###' , mapMarkerEvent : '###OXMAPCONFIGMAPMARKEREVENT###' // click \| hover \| on , route : { data : routes , defaultStyle : { strokeWidth : 1 , strokeColor : '#000' } } ) } } You have to replace the code snippet above with your extended code, if you are like to use a custom layer (see sample below). The code is changed from version < 4.6 to 4.6. See former code at ... .. _Custom-Code: Custom Code """"""""""" Example In this example you have a corporate design (your own PNG file) in three zoom levels. plugin.tx\_browser\_pi1 { views.list.501.navigation.map.marker.snippets.html.dynamic.map\_jss.30 .20 { value ( language : '###OXMAPCONFIGLANGUAGE###' // default \| en \| de , wms : '###OXMAPCONFIGWMS###' // OSM , type : '###OXMAPCONFIGTYPE###' // Mapnik \| ROADMAP , modules : '###OXMAPCONFIGMODULES###' // Error, OSM.Base, // OSM.CDmap, OSM.Filter , imagePath : '###OPENLAYERSIMGPATH###' , cssPath : '###OPENLAYERSCSS###' , mapId : '{$plugin.tx\_browser\_pi1.map.html.id}' , mapControls : '###OXMAPCONFIGMAPCONTROLS###' , mapMarkerEvent : '###OXMAPCONFIGMAPMARKEREVENT###' // click \| hover \| on , filter : { wrapper : '{$plugin.tx\_browser\_pi1.map.html.form.id}' } , center : { lon : 11.322578, lat : 50.98098 } , startLevel : '###OXMAPCONFIGSTARTLEVEL###' , zoomWheelEnable : '###OXMAPCONFIGZOOMWHEELENABLE###' , numZoomLevels : '###OXMAPCONFIGNUMZOOMLEVELS###' , customMap : { type: 'Image' , size: { w: {$plugin.tx\_browser\_pi1.map.design.width} , h: {$plugin.tx\_browser\_pi1.map.design.height} } , bounds : { // define bounds for pan inside a smaller area w: 11.29976 , s: 50.95955 , e: 11.35304 , n: 50.99803 } , imageType : 'png' , png : { 0: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2.le vel0.png' , 1: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2. level1.png' , 2: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2. level2.png' } , numZoomLevels : '###OXMAPCONFIGNUMZOOMLEVELS###' , startLevel : '###OXMAPCONFIGSTARTLEVEL###' } ) } } Line 17: Center of the map is defined manually Line 21 to 41: The added custom array. The code has changed from TYPO3 Browser version 4.6.See the former code at "TypoScript for own corporate design < 4.6" on page 51 below. .. _Draft-for-a-link-to-a-single-view: Draft for a link to a single view ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ plugin.tx\_browser\_pi1 { ... views { list { 501 = +Org: Headquarters 501 { ... navigation { map < plugin.tx\_browser\_pi1.navigation.map map { marker { variables { system { description > description < \plugin.tx\_browser\_pi1.displayList.master\_templates.m ap.descriptionWiLinkToSingle } } } } } } } } } Line 14 to 15: The master template for a description with a link to a single view is copied. If you like to know more about the link to a single view, please inspect plugin.tx\_browser\_pi1.displayList.master\_templates.map.descriptionW iLinkToSingle .. _Google-Maps-and-OpenStreetMap: Google Maps and OpenStreetMap ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ You can use both: - Google Maps - OpenStreetMap .. _Pick-it-out-with-one-mouse-click: Pick it out with one mouse click """""""""""""""""""""""""""""""" There are a lot of reasons for the one or the other map provider: - licences, - costs - performance - features or - design. BrowserMaps enables you, to pick Google Maps and OpenStreetMap out with one mouse click. |img-5| Module: Web > Template Page tree: Your page, which contains the Browser pluginand should display Google Maps or OpenStreetMap Edit area: [Constant Editor] Category: [BROWSERMAPS – CONTROLLING] Map Provider: [Google Maps] or [OpenStreetMap] .. _Route: Route ^^^^^ Please refer to the extension TYPO3 Route at `http://typo3.org/extensions/repository/view/route/ `_ Live example at `http://typo3-route.de/ `_ .. _Controlling: Controlling ----------- .. _HTML: HTML ^^^^ The map has an HTML template of course. See in the reference the - section "navigation.map.template" on page 40 below and - section "navigation.map.marker.snippets" on page 43 below. .. _Marker: Marker """""" The HTML template consists of markers only. Each marker will replaced with its content while runtime. Each marker is a cObject and will controlled by TypoScript. You can add your own marker to the HTML template and to the TypoScript. .. _HTML-snippet: HTML snippet ~~~~~~~~~~~~ ###MAP\_CSS###
###FILTER\_FORM### ###MAP\_HTML### ###MAP\_JSS###
.. _TypoScript: TypoScript ~~~~~~~~~~ plugin.tx\_browser\_pi1.navigation.map.marker.snippets.\* .. _CSS: CSS ^^^ The HTML design of the map is controlled by CSS. The Browser includes a CSS file. If you like to take your own CSS, please include your own CSS file. See plugin.tx\_browser\_pi1.navigation.map.marker.snippets.html.dynamic.ma p\_css Features of CSS styling are among others: - map - height - width - popup - height - width - border - shadow .. _JSS: JSS ^^^ The map is enabled and controlled by JavaScript and supported by the framework jQuery. The Browser takes care of including all needed files. If you like, you can use your own JSS files. Some variables in the JSS files are set while runtime. You can add your own variables and control it by TypoScript. .. _TypoScript: TypoScript ^^^^^^^^^^ .. _Constant-Editor: Constant Editor """"""""""""""" .. _Why-should-you-use-the-TypoScript-Constant-Editor: Why should you use the TypoScript Constant Editor? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Some values are used several times in the setup of the TypoScript. If you are editing the setup directly, you have to know, if a value is used in other parts too. This is insecure. If you are using the Constant Editor, it will manage the configuration at several parts for you. This is secure. .. _BROWSERMAPS-ALIASES: BROWSERMAPS – ALIASES ~~~~~~~~~~~~~~~~~~~~~ map.aliases.showUid.marker = showUid Parameter of the marker uid in the URL. It is used in links to the single view map.aliases.showUid.path = routeUid Parameter of the path uid in the URL. It is used in links to the single view .. _BROWSERMAPS-CONTROLLING: BROWSERMAPS - CONTROLLING ~~~~~~~~~~~~~~~~~~~~~~~~~ map.controlling.enabled = disabled Map: Map with marker only. Map +Routes: Map with routes and marker. map.controlling.provider = Open Street MapGoogle Maps or OpenStreetMap.Please take care of the licences! Copyright must be visible! map.controlling.dontHandle00Coordinates = 1Empty coordinates?Don't handle latitudes and longitudes, which are empty or 0. .. _BROWSERMAPS-Database-Marker: BROWSERMAPS - Database Marker ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ map.marker.field.linktoSingle = table.field with record uid\*: \*Obligate! Example: tx\_org\_headquarters.uid map.marker.field.latitude = table.field with the latitude\*: \*Obligate!Example: tx\_org\_headquarters.latitude map.marker.field.longitude = table.field with the longitude\*: \*Obligate!Example: tx\_org\_headquarters.longitude map.marker.field.description = \*Obligate! table.field with the content for the popup.Example: tx\_org\_headquarters.short map.marker.field.number = table.field with the number: It may be a number or text. It is optional.Example: tx\_org\_headquarters.uid map.marker.field.category = table.field with the category: Example: tx\_org\_headquarterscat.title map.marker.field.categoryIcon = table.field with the category icons: Example: tx\_org\_headquarterscat.icons map.marker.field.categoryOffsetX = table.field with category x-offset:Example: tx\_org\_headquarterscat.icon\_offset\_x map.marker.field.categoryOffsetY = table.field with category y-offset:Example: tx\_org\_headquarterscat.icon\_offset\_y .. _BROWSERMAPS-Database-Path: BROWSERMAPS - Database Path ~~~~~~~~~~~~~~~~~~~~~~~~~~~ map.path.table.path.title = table.field with the path title: Example: tx\_route\_path.title map.path.table.path.geodata = table.field with the geodata: Example: tx\_route\_path.geodata map.path.table.path.color = table.field with the path color: Example: tx\_route\_path.color map.path.table.path.lineWidth = table.field with the path thickness: Example: tx\_route\_path.line\_width map.path.table.pathCategory.title = table.field with path category titles: Example: tx\_route\_path\_cat.title map.path.table.marker.title = table.field with marker title: Example: tx\_route\_marker.title map.path.table.markerCategory.title = table.field with path marker title: Example: tx\_route\_marker\_cat.title .. _BROWSERMAPS-Database-Path-mapper: BROWSERMAPS - Database Path mapper ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ map.path.mapper.tables.local.path = table with the path data\*: \*Obligate! Example: tx\_route\_path map.path.mapper.tables.local.marker = table with the marker data\*: \*Obligate! Example: tx\_route\_marker map.path.mapper.tables.cat.path = table with the path categories\*: \*Obligate! Example: tx\_route\_path\_cat map.path.mapper.tables.cat.marker = table with the marker data\*: \*Obligate! Example: tx\_route\_marker\_cat map.path.mapper.fields.local.title.path = title field of the path table: Example: title map.path.mapper.fields.local.title.marker = title field of the marker table: Example: title map.path.mapper.fields.local.lat.path = latitude field of the path table\*: \*Obligate! Example: icon\_lat map.path.mapper.fields.local.lat.marker = latitude field of the marker table\*: \*Obligate! Example: lat map.path.mapper.fields.local.lon.path = longitude field of the path table\*: \*Obligate! Example: icon\_lon map.path.mapper.fields.local.lon.marker = longitude field of the marker table\*: \*Obligate! Example: lon map.path.mapper.fields.cat.title.path = title field of the path cat table: Example: title map.path.mapper.fields.cat.title.marker = title field of the marker cat table: Example: title map.path.mapper.fields.cat.icons.path = icons field of the path cat table: Example: icons map.path.mapper.fields.cat.icons.marker = icons field of the marker cat table: Example: icons map.path.mapper.fields.cat.iconOffsetX.path = icons-offset-x of path cat table: Example: icons\_offset\_x map.path.mapper.fields.cat.iconOffsetX.marker = icons-offset-x of marker cat table: Example: icons\_offset\_x map.path.mapper.fields.cat.iconOffsetY.path = icons-offset-y of path cat table: Example: icons\_offset\_y map.path.mapper.fields.cat.iconOffsetY.marker = icons-offset-y of marker cat table: Example: icons\_offset\_y .. _BROWSERMAPS-DEBUGGING: BROWSERMAPS – DEBUGGING ~~~~~~~~~~~~~~~~~~~~~~~ map.debugging.feAlert = 0 Frontend Alert: Error module is added. There will be an alert in the frontendin case of a bug. map.debugging.uncompressed = 0 Use uncompressed JavaScript:The oxMap API files will includeduncompressed. Default is to include one compressed file. .. _BROWSERMAPS-DEFAULT-ICONS: BROWSERMAPS - DEFAULT ICONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~ map.pathToLegend = EXT:browser/res/js/map/icons/legend/Path to legend icons: Path to the directory, which contains the images for the form legend(with ending slash!). Default: EXT:browser/res/js/map/icons/legend/ map.pathToPoints = EXT:browser/res/js/map/icons/points/Path to point icons: Path to the directory, which contains the images for points in the map(with ending slash!). Default: EXT:browser/res/js/map/icons/points/ .. _BROWSERMAPS-DESIGN: BROWSERMAPS - DESIGN ~~~~~~~~~~~~~~~~~~~~ map.design.height = 400 Map height: Height of the map (in pixel) map.design.width = 600 Map width: Width of the map (in pixel) map.design.css = /typo3conf/ext/browser/res/js/map/lib/OpenLayers\_2.1 2/theme/default/style.cssPath to the CSS file. Example: fileadmin/my\_openstreetmap/css/style.css map.design.imgPath = /typo3conf/ext/browser/res/js/map/lib/OpenLayers\_2.12/img/Path to the directory with the icons of the control panel among others(with ending slash). Example: fileadmin/my\_openstreetmap/icons/ map.design.path.categoryIcon = uploads/media/Path to the directory with the category icons (with ending slash).Example: uploads/tx\_org/ .. _BROWSERMAPS-HTML: BROWSERMAPS - HTML ~~~~~~~~~~~~~~~~~~ map.html.id = oxMap-area Map id: HTML id of the map div-tag map.html.form.id = oxMap-filter-module Filter id: HTML id of the filter form map.html.form.input.class = oxMap-filter-item Input class: HTML class of the input fields .. _BROWSERMAPS-ICONS: BROWSERMAPS - ICONS ~~~~~~~~~~~~~~~~~~~ map.icon.listNum.categoryIconLegend = 0 Position of legend iconPosition of the icon in the table.field with the category icons.1st position: 0. 2nd position: 1. 3rd position: 2. ... Default: 0 map.icon.listNum.categoryIconMap = 0 Position of map icon (list view)Position of the icon in the table.field with the category icons.1st position: 0. 2nd position: 1. 3rd position: 2. ... Default: 0 map.icon.listNum.categoryIconMapSingle = 0 Position of map icon (single view)Position of the icon in the table.field with the category icons.1st position: 0. 2nd position: 1. 3rd position: 2. ... Default: 0 map.icon.listNum.categoryIconText = 0 Position of text iconPosition of the icon in the table.field with the category icons.1st position: 0. 2nd position: 1. 3rd position: 2. ... Default: 0 .. _BROWSERMAPS-MOBILE: BROWSERMAPS - MOBILE ~~~~~~~~~~~~~~~~~~~~ map.mobileTouchscreen = 0 Optimize for TouchscreensYou can navigate in your map in touchscreens, if this option is enabled.This option has the disadvantage, that you can't use the click modefor your pop ups. In enabled touchscreen mode pop ups will enabledby a hover automatically, click mode will ignored. .. _BROWSERMAPS-OPENLAYERS: BROWSERMAPS – OPENLAYERS ~~~~~~~~~~~~~~~~~~~~~~~~ map.openlayers.controls.default = 'Navigation,PanZoom'Map controls: Comma seperated list of quoted map controls wrappedby square brackets. Examples:- Navigation,PanZoom- Navigation,PanZoom,LayerSwitcher map.openlayers.controls.debugging = 'Navigation,PanZoom,LayerSwitcher'Map controls (debugging): Comma seperated list of quoted map controlswrapped by square brackets. Examples:- Navigation,PanZoom- Navigation,PanZoom,LayerSwitcher map.openlayers.modules.default = 'OSM.Base,OSM.Filter'Map modules: Comma seperated list of map modules (quoted).Values: Error, OSM.CDmap, OSM.Base (OSM.Render, OSM.Marker,OSM.Tooltip), OSM.Filter, OSM.Route.OSM.CDmap is needed, if you are using the custom array. map.openlayers.modules.routes.default = 'OSM.Route,OSM.Base,OSM.Filter'Map +Routes modules: Comma seperated list of map modules (quoted).OSM.Routes must be the first element!Values: Error, OSM.CDmap, OSM.Base (OSM.Render, OSM.Marker,OSM.Tooltip), OSM.Filter, OSM.Route.OSM.CDmap is needed, if you are using the custom array. map.openlayers.modules.debugging = 'Error,OSM.Base,OSM.Filter'Map modules (debugging): Comma seperated list of map modules (quoted).Values: Error, OSM.CDmap, OSM.Base (OSM.Render, OSM.Marker,OSM.Tooltip), OSM.Filter, OSM.Route.OSM.CDmap is needed, if you are using the custom array. map.openlayers.modules.routes.debugging = 'Error,OSM.Route,OSM.Base,OSM.Filter'Map +Routes modules (debugging): Comma seperated list of map modules(quoted). OSM.Routes must be the first element!Values: Error, OSM.CDmap, OSM.Base (OSM.Render, OSM.Marker,OSM.Tooltip), OSM.Filter, OSM.Route.OSM.CDmap is needed, if you are using the custom array. map.openlayers.popup.behaviour = hover Pop-up behaviour- click: display by a mouse click.- hover: display by a mouse over.- off: don't display.- on: display a point without any effect.If you have touchscreens enabled (see section MOBILE),your selection will ignored: hover will used in any case. .. _BROWSERMAPS-ZOOM: BROWSERMAPS - ZOOM ~~~~~~~~~~~~~~~~~~ map.zoomWheel = 1 Zoom wheel:Enable or disable the zoom wheel. map.zoomLevel.mode = auto Zoom level mode:Auto: An optimal zoom level will calculated.Fixed: Zoom level will taken from the field "Fixed zoom level" below. mmap.zoomLevel.start = 4 The start zoom level. Value from 1 to 18. Value has an effect only,if zoom level mode is "fixed". Default: 4 map.zoomLevel.max = 18 Maximum zoom level: The maximum zoom level. Maximum value hasan effect only, if zoom level mode is "auto". Default: 18 map.zoomLevel.levels = 18 Number of zoom levels for CI: The number of zoom levels with an own CI.Value should not be greater than Maximum zoom level. .. _Automatic-Geocoding: Automatic Geocoding ------------------- BrowserMaps is able to geocode address data. Geocode means: your address data get a latitude and a longitude. BrowserMaps supports automatic geocoding: - while you are save a record with address data - by a cronjob for all address data of one table You are configuring automatic geocoding by TCA – the TYPO3 Configuration Array – in the file ext\_tables.php of your extension. .. _Google-Geocoding-API: Google Geocoding API ^^^^^^^^^^^^^^^^^^^^ BrowserMaps is using the Google Geocoding API. .. _Licence-isn-t-checked: Licence isn't checked """"""""""""""""""""" If the use of the Google Geocoding API by BrowserMaps complies the Google Geocoding API licence, isn't checked. If you are using the Google Geocoding API you have to publish your data with Google Maps in every case. .. _Restricted-Privacy: Restricted Privacy ^^^^^^^^^^^^^^^^^^ If you are using automatic geocoding, the privacy is restricted, because you send your address data to a map provider. You can't know, how the map provider does use your data. .. _Configuration: Configuration ^^^^^^^^^^^^^ .. _Code-snippet: Code snippet """""""""""" Example of the extension TYPO3 Route. See the reference on the next page. File: ext\_tables.php $TCA['tx\_route\_marker'] = array ( 'ctrl' => array ( ... 'tx\_browser' => array ( 'geoupdate' => array ( 'address' => array ( 'country' => 'country', 'areaLevel1' => 'areaLevel1', 'areaLevel2' => 'areaLevel2', 'location' => array ( 'zip' => 'zip', 'city' => 'city', ), 'street' => array ( 'name' => 'street', 'number' => null, ), ), 'api' => array ( 'prompt' => 'geoupdateprompt', 'forbidden' => 'geoupdateforbidden', ), 'geodata' => array ( 'lat' => 'lat', 'lon' => 'lon', ), 'update' => $geocodingEnabled, ), ), ), ); .. _Reference: Reference ^^^^^^^^^ ctrl.tx\_browser.geoupdate .. ### BEGIN~OF~TABLE ### .. _address: address """"""" .. container:: table-row Property address Data type array Description Fields for your address data. You need at least one field (for example "country"). The properties correspondent with the Google Geocoding API. Example: - US address `http://maps.googleapis.com/maps/api/geocode/json `_ `?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false `_ - German address `http://maps.googleapis.com/maps/api/geocode/json?addre ss=Pariser+Platz+1,10117+Berlin&sensor=false `_ **Example:** :: $TCA['tx_route_marker'] = array ( 'ctrl' => array ( ... 'tx_browser' => array ( 'geoupdate' => array ( 'address' => array ( 'country' => 'country', 'areaLevel1' => 'areaLevel1', 'areaLevel2' => 'areaLevel2', 'location' => array ( 'zip' => 'zip', 'city' => 'city', ), 'street' => array ( 'name' => 'street', 'number' => null, ), ), ... ), ), ), ); .. _api: api """ .. container:: table-row Property api Data type array Description Fields for prompting and controlling - prompt: If you have a field for prompts, BrowserMaps prompts to this field information, warnings and errors.For example:If you are running the cron job, BrowserMaps prompts if an address is updated and when it was updated. - forbidden: You can provide a check box for controlling updates per address. If this check box is true, the address of the current record won't updated. **Example:** :: $TCA['tx_route_marker'] = array ( 'ctrl' => array ( ... 'tx_browser' => array ( 'geoupdate' => array ( ... 'api' => array ( 'prompt' => 'geoupdateprompt', 'forbidden' => 'geoupdateforbidden', ), ... ), ), ), ); .. _geodata: geodata """"""" .. container:: table-row Property geodata Data type array Description Fields for latitude and longitude **Example:** :: $TCA['tx_route_marker'] = array ( 'ctrl' => array ( ... 'tx_browser' => array ( 'geoupdate' => array ( ... 'geodata' => array ( 'lat' => 'lat', 'lon' => 'lon', ), ... ), ), ), ); .. _update: update """""" .. container:: table-row Property update Data type boolean Description Update must set to true, if BrowserMaps should update the geocode of your address data. You can allocate a variable, which is controlled by the extension manager of your extension like in the example below. **Example:** :: $TCA['tx_route_marker'] = array ( 'ctrl' => array ( ... 'tx_browser' => array ( 'geoupdate' => array ( ... 'update' => $geocodingEnabled, ), ), ), ); .. ###### END~OF~TABLE ###### .. _Scheduled-task-cron-job: Scheduled task (cron job) ^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Requirement: Requirement """"""""""" If you like to update all addresses of a specific table, the TCA of this table must configured like in the section "Configuration" on page 30 above. .. _Restriction: Restriction """"""""""" The scheduled task will update address records only, if it have empty latitudes and empty longitudes. This restriction should protect the geocoding API: unnecessarily requests will not sent. .. _Configuration: Configuration """"""""""""" .. _Select-the-geoupdate-task: Select the geoupdate task ~~~~~~~~~~~~~~~~~~~~~~~~~ |img-5| Module: Admin Tools > Scheduler Edit area: [Information] Add the task "Browser – TYPO3 without PHP – geoupdate.Click on the icon with the plus at the right hand. .. _Edit-the-task: Edit the task ~~~~~~~~~~~~~ |img-5| Module: Admin Tools > Scheduler Edit area: [Scheduled Tasks] Edit the task "Browser – TYPO3 without PHP – geoupdate.Disable [X]Frequency: 86400 (each day)Table with address data: your table .. _Start-the-task-manually: Start the task manually ~~~~~~~~~~~~~~~~~~~~~~~ |img-5| Module: Admin Tools > Scheduler Edit area: [Scheduled Tasks] [X] Browser – TYPO3 without PHP – geoupdate.[Execute the selected tasks] |img-5| You will receive some prompts. .. _Report-by-e-mail: Report by e-mail ~~~~~~~~~~~~~~~~ |img-5| You will receive a report by e-mail. In the example above - no row (#0) is updated, because - all rows (#5) don't have empty geodata. .. _Logging: Logging ~~~~~~~ |img-5| The task prompts details to syslog. See Module: Admin Tools > Log Edit area: Prompts .. _DRS-Development-Reporting-System: DRS – Development Reporting System ---------------------------------- .. _Inspect-work-flow-and-errors: Inspect work-flow and errors ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The DRS – Development Reporting System – enables you - to follow the work-flow of BrowserMaps, - to inspect alternate configuration possibilities, - to inspect unproper configuration and - it prompts warnings and errors .. _Enabling-the-DRS: Enabling the DRS ^^^^^^^^^^^^^^^^ |img-5| Module: Admin Tools > Extension Manager Edit Area: Select the Browser extension Tab [Configuration] Category: [Debugging] DRS – Development reporting System: [BrowserMaps] [Update] .. _The-DRS-report: The DRS report ^^^^^^^^^^^^^^ .. _Precondition: Precondition """""""""""" You need the extension Extension Development Evaluator (extdeveval) .. _Report: Report """""" |img-5| Module: Admin Tools > Development Log Edit Area: the report .. _Reference: Reference --------- .. _plugin-tx-browser-pi1: plugin.tx\_browser\_pi1 ^^^^^^^^^^^^^^^^^^^^^^^ This tutorial provides only the reference for the user defined functions (see below). You find all other stuff in the manual of the Browser: - HTML `http://typo3.org/documentation/document-library/extension- manuals/browser/current/ `_ - PDF: `http://typo3.org/extensions/repository/view/browser/current/info /?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf `_ .. _Map-global-and-local: Map: global and local ^^^^^^^^^^^^^^^^^^^^^ .. ### BEGIN~OF~TABLE ### .. _map: map """ .. container:: table-row Property map Data type array Description Global and local **Example:** :: // Global: has an effect for all views plugin.tx_browser_pi1 { navigation { map { ... } } } // Local: has an effect for the current view only plugin.tx_browser_pi1 { views { list { 1 { navigation { map < plugin.tx_browser_pi1.navigation.map map { ... } } } } } } .. ###### END~OF~TABLE ###### .. _plugin-tx-browser-pi1-navigation-map: plugin.tx\_browser\_pi1.navigation.map ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The map property is part of the top level navigation property. .. _Overview: Overview """""""" The map has four properties on the top level. .. ### BEGIN~OF~TABLE ### .. _map: map ~~~ .. container:: table-row Property map Data type array Description :: plugin.tx_browser_pi1 { navigation { map { // [BOOLEAN] 0 (default), 1 enabled = {$plugin.tx_browser_pi1.map.enabled} template { // [STRING] Path to the map HTML template file = EXT:browser/res/html/map/default.tmpl } configuration { ... } marker { ... } } } } .. ###### END~OF~TABLE ###### .. _navigation-map-enabled: navigation.map.enabled """""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-enabled: map.enabled ~~~~~~~~~~~ .. container:: table-row Property map.enabled Data type boolean Description Enable the map module. Please edit this value with the TypoScript Constant Editor. Please don't edit it directly. **Example:** :: plugin.tx_browser_pi1 { navigation { map { // [BOOLEAN] 0 (default), 1 enabled = {$plugin.tx_browser_pi1.map.enabled} } } } .. ###### END~OF~TABLE ###### .. _navigation-map-template: navigation.map.template """"""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-template: map.template ~~~~~~~~~~~~ .. container:: table-row Property map.template Data type string Description Path to the HTML map template **Example:** :: plugin.tx_browser_pi1 { navigation { map { template { // [STRING] Path to the map HTML template file = EXT:browser/res/html/map/default.tmpl } } } } .. ###### END~OF~TABLE ###### Content of default.tmpl: ###MAP\_CSS###
###FILTER\_FORM### ###MAP\_HTML### ###MAP\_JSS###
The used marker should be self-explanatory. .. _navigation-map-configuration: navigation.map.configuration.\* """"""""""""""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-configuration-categories-colours: map.configuration.\categories.colours ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.configuration.\categories.colours Data type array Description |img-8| Illustration 30: Legend (1) and points (2) Configuration of icons, HTML form input and ordering. **Example:** :: plugin.tx_browser_pi1 { navigation { map { configuration { categories { colours { legend { // Reddark 10 = IMAGE 10 { file = \ {$plugin.tx_browser_pi1.map.pathToLegend}reddark.png } ... // white 120 = IMAGE 120 { ... } } points { // Label for a clear view only and without any effect 10 = reddark 10 { // [STRING] path to the icon. pathToIcon = TEXT pathToIcon { value = \ {$plugin.tx_browser_pi1.map.pathToPoints}reddark.png } // [INTEGER] x-offset of the icon in Pixel offsetX = 0 // [INTEGER] y-offset of the icon in Pixel offsetY = 0 // [INTEGER] height of the icon in Pixel height = 14 // [INTEGER] width of the icon in Pixel width = 14 } ... // Label for a clear view only and without any effect 120 = white 120 { ... } } } field = {$plugin.tx_browser_pi1.map.field.category} // [STRING/HTML] Draft for an input field of the \ category form form_input = ###CAT### ###IMG### // [STRING] SORT_REGULAR, SORT_NUMERIC, SORT_STRING \ or SORT_LOCALE_STRING orderBy = SORT_STRING } } } } } .. _map-configuration-centerCoordinates: map.configuration.\centerCoordinates ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.configuration.\centerCoordinates Data type array Description The map module will center the coordinates (dots) in the map by default. **Example:** :: plugin.tx_browser_pi1 { navigation { map { configuration { centerCoordinates { // [STRING] auto (recommended) || ts. auto: center \ will calculated. ts: center will taken from TypoScript mode = auto // [STRING] marker for the center in the HTML code. dynamicMarker = OSMConfigCenter } } } } } .. _map-configuration-00Coordinates: map.configuration.\00Coordinates ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.configuration.\00Coordinates Data type array Description How should coordinates 0,0 handled? **Example:** :: plugin.tx_browser_pi1 { navigation { map { configuration { 00Coordinates { // [BOOLEAN] true (recommended) || false. True: If a \ coordinate is 0,0, it won't handled and won't displayed dontHandle = \ {$plugin.tx_browser_pi1.map.controlling.dontHandle00Coordinates} } } } } } .. _map-configuration-zoomLevel: map.configuration.\zoomLevel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.configuration.\zoomLevel Data type array Description The map module tries to calculate the zoom level by default. Please configure the TypoScript by the Constant Editor. **Example:** :: plugin.tx_browser_pi1 { navigation { map { configuration { zoomLevel { // [STRING] auto (recommended) || fixed. auto: zoom \ level will calculated. fixed: zoom level will taken \ from map.marker.snippets.jss.dynamic.MapZoomLevels \ and map.marker.snippets.jss.dynamic.OSMConfigZoom mode = {$plugin.tx_browser_pi1.map.zoomLevel.mode} // [STRING] marker for the center in the HTML code. \ Example: OSMConfigZoom dynamicMarker = OSMConfigZoom // [INTEGER] Maximum zoom level max = {$plugin.tx_browser_pi1.map.zoomLevel.max} } } } } } .. ###### END~OF~TABLE ###### .. _navigation-map-marker: navigation.map.marker.\* """""""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-marker: map.marker.\* ~~~~~~~~~~~~~ .. container:: table-row Property map.marker.\* Data type array Description Map marker Overview :: plugin.tx_browser_pi1 { navigation { map { marker { addToCData { // Each item will be a part of the current record while \ runtime. You can create your own item. } snippets { // HTML code snippets and JSS code snippets. The \ properties correspondents with the markers of the \ HTML marker map } variables { // Values, which will set while runtime. } } } } } .. ###### END~OF~TABLE ###### .. _navigation-map-marker-addToCData: navigation.map.marker.addToCData """""""""""""""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-marker-addToCData-system: map.marker.\addToCData.system ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.marker.\addToCData.system Data type array Description The marker mapLinkToSingle will added to the CData while runtime and is available in TypoScript by field = mapLinkToSingle. :: plugin.tx_browser_pi1.navigation.map.marker.addToCData { system { mapLinkToSingle = COA mapLinkToSingle { // Please take the TypoScript Object Browser ... } } } .. ###### END~OF~TABLE ###### .. _navigation-map-marker-snippets: navigation.map.marker.snippets """""""""""""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-marker-snippets: map.marker.snippets ~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.marker.snippets Data type array Description Please inspect the snippets by the TypoScript Object Browser. :: plugin.tx_browser_pi1 { navigation { map { marker { snippets { // HTML code snippets and JSS code snippets. The \ properties correspondents with the markers of the \ HTML marker map } } } } } .. ###### END~OF~TABLE ###### .. _navigation-map-marker-variables: navigation.map.marker.variables """"""""""""""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _map-marker-variables: map.marker.variables ~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property map.marker.variables Data type array Description Map marker Overview :: plugin.tx_browser_pi1 { navigation { map { marker { variables { dynamic { css_mapHeight = TEXT css_mapHeight { // [PIXEL] Default: 400px value = {$plugin.tx_browser_pi1.map.height}px; } css_mapWidth = TEXT css_mapWidth { // [PIXEL] Default: 600px value = {$plugin.tx_browser_pi1.map.width}px; } } system { // [STRING] category label in the filter category = TEXT category { field = {$plugin.tx_browser_pi1.map.field.category} } // Returns the icon as an HTML image tag categoryIconLegend = IMAGE categoryIconLegend { file { ... } } // [STRING] path to the category icon for the map categoryIconMap = COA categoryIconMap { // Directory 10 = TEXT 10 { ... } // File 20 = TEXT 20 { ... } } // [NUMBER] latitude latitude = TEXT latitude { field = {$plugin.tx_browser_pi1.map.field.latitude} } // [NUMBER] longitude longitude = TEXT longitude { field = {$plugin.tx_browser_pi1.map.field.longitude} } // [STRING] content in the popup description = TEXT description { field = {$plugin.tx_browser_pi1.map.field.description} } } } } } } } .. ###### END~OF~TABLE ###### .. _Legal-Notice: Legal Notice ------------ If your are using map services like Google Maps or OpenStreetMap you must respect the terms of Google Maps or OpenStreetMap of course. .. _Google-Maps: Google Maps ^^^^^^^^^^^ If you want to know more about the terms of service for Google Maps and GoogleEarth APIs please refer to - `http://maps.google.com/ `_ - `https://developers.google.com/maps/terms `_ There is no warranty, that the links above provides the latest state of affairs or that they are proper. .. _OpenStreetMap: OpenStreetMap ^^^^^^^^^^^^^ If you want to know more about the licence for OpenStreetMap please refer to - `http://www.openstreetmap.org/ `_ - `http://opendatacommons.org/licenses/odbl/ `_ There is no warranty, that the links above provides the latest state of affairs or that they are proper. .. _What-s-new: What's new? ----------- See details in the section "Change Log" on page 61 below. .. _Version-4-6: Version 4.6 ^^^^^^^^^^^ .. _Automatic-Geocoding: Automatic Geocoding """"""""""""""""""" [4.5.15] .. _Constant-Editor-is-extended: Constant Editor is extended """"""""""""""""""""""""""" [4.5.15] The Constant Editor has a lot of new properties. See "Constant Editor" on page 26 above. .. _oxMap-1-3: oxMap 1.3 """"""""" [4.5.6] The map rendering API for the TYPO3 frontend is updated from 1.2 to 1.3. Version 1.3 - doesn't need any longer jQuery and - supports the rendering of routes. .. _Mobile: Mobile """""" [4.5.15] You can optimize BrowserMaps for touch screens (mobile devices). This feature is fit but under development. See "BROWSERMAPS - MOBILE" on page 28 above. .. _Route: Route """"" [4.5.7] You can publish routes – paths with marker (POI). See "Route" on page 24 above. .. _Version-4-5: Version 4.5 ^^^^^^^^^^^ .. _Debugging-Mode-with-Layer-Switcher: Debugging Mode with Layer Switcher """""""""""""""""""""""""""""""""" [4.4.4] You can enable a debugging mode by the Constant Editor. In this mode you will get JavaScript alerts, if something went wrong. In debugging mode you have a layer switcher. The layer switcher enables to display or hide the map view of Google Maps and OpenStreetMap and to display or hide your individual designed map. .. _Google-Maps: Google Maps """"""""""" [4.4.6] The Browser Map module (BrowserMaps) supports Google Maps. The TYPO3 integrator can switch between Google Maps and OpenStreetMap in the Constant Editor with one mouse click. Because of this feature BrowserMaps got a new map API. .. _Version-4-4: Version 4.4 ^^^^^^^^^^^ .. _API-is-improved: API is improved """"""""""""""" [4.4.0] The API for rendering the map is improved: - JavaScript code is established with namespaces. This avoids conflicts with other frameworks. - The JavaScript code is splitted in several files. Each file is a module. - See more improvements below. .. _Compressed-JSS-file-by-default: Compressed JSS-file by default """""""""""""""""""""""""""""" [4.4.0] The API script is compressed by default. For debugging and development you can use the uncompressed files. See "Debugging" below. .. _Debugging: Debugging """"""""" [4.4.0] The TypoScript Constant Editor is extended with the category "Debugging". - You can enable the frontend error management. If there is an error, you will get an alert. - You can include the uncompressed JSS files. This feature enables you to debug and develop the JavaScript API. .. _Link-to-single-view-with-cHash: Link to single view with cHash """""""""""""""""""""""""""""" [4.4.3] Link to the single view got a cHash. BrowserMaps is running without and with RealUrl proper. .. _Version-4-3: Version 4.3 ^^^^^^^^^^^ .. _BrowserMaps-Offset-for-categories: BrowserMaps: Offset for categories """""""""""""""""""""""""""""""""" [4.1.25] Categories can get an offset. If you have a lot of data, category icons will displayed with an offset. .. _Version-4-1: Version 4.1 ^^^^^^^^^^^ .. _OpenStreetMap: OpenStreetMap """"""""""""" [4.1.23] You can publish your data supported by OpenStreetMap. See BrowserMaps Tutorial `http://typo3-browser.de/typo3conf/ext/browser\_t ut\_map\_en/doc/manual.pdf `_ .. _Update: Update ------ .. _From-Version-4-6-to-4-6: From Version < 4.6 to 4.6 ^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Constants-have-changed: Constants have changed """""""""""""""""""""" .. _Overview: Overview ~~~~~~~~ .. ### BEGIN~OF~TABLE ### .. _Constants-4-6: **Constants < 4.6** ''''''''''''''''''' .. container:: table-row a **Constants < 4.6** b **Constants from 4.6** .. _map-controls-debugging: map.controls.debugging '''''''''''''''''''''' .. container:: table-row a map.controls.debugging b map.openlayers.controls.debugging .. _map-controls-default: map.controls.default '''''''''''''''''''' .. container:: table-row a map.controls.default b map.openlayers.controls.default .. _map-enabled: map.enabled ''''''''''' .. container:: table-row a map.enabled b map.controlling.enabled .. _map-height: map.height '''''''''' .. container:: table-row a map.height b map.design.height .. _map-modules-debugging: map.modules.debugging ''''''''''''''''''''' .. container:: table-row a map.modules.debugging b map.openlayers.modules.debugging .. _map-modules-default: map.modules.default ''''''''''''''''''' .. container:: table-row a map.modules.default b map.openlayers.modules.default .. _map-modules-routes-debugging: map.modules.routes.debugging '''''''''''''''''''''''''''' .. container:: table-row a map.modules.routes.debugging b map.openlayers.modules.routes.debugging .. _map-modules-routes-default: map.modules.routes.default '''''''''''''''''''''''''' .. container:: table-row a map.modules.routes.default b map.openlayers.modules.routes.default .. _map-openLayers-css: map.openLayers.css '''''''''''''''''' .. container:: table-row a map.openLayers.css b map.design.css .. _map-openLayers-imgPath: map.openLayers.imgPath '''''''''''''''''''''' .. container:: table-row a map.openLayers.imgPath b map.design.imgPath .. _map-path-categoryIcon: map.path.categoryIcon ''''''''''''''''''''' .. container:: table-row a map.path.categoryIcon b map.design.path.categoryIcon .. _map-popup-behaviour: map.popup.behaviour ''''''''''''''''''' .. container:: table-row a map.popup.behaviour b map.openlayers.popup.behaviour .. _map-provider: map.provider '''''''''''' .. container:: table-row a map.provider b map.controlling.provider .. _map-width: map.width ''''''''' .. container:: table-row a map.width b map.design.width .. ###### END~OF~TABLE ###### .. _Quick-and-dirty-not-recommended: Quick and dirty (not recommended) """"""""""""""""""""""""""""""""" A quick and dirty is possible but not recommended. Quick and dirty means: You downgrade the behaviour of BrowserMaps to the Browser version 4.5.4. You just have - to reset the TypoScript of the Browser - and to include the TypoScript of the version 4.5.4 .. _Example-with-the-Organiser: Example with the Organiser ~~~~~~~~~~~~~~~~~~~~~~~~~~ - The Browser TypoScript is included by a page on a higher level. - The page with the Organiser headquartes has included the Organiser headquarter TypoScript(see illustration on the left hand below) - If you like to downgrade, please include the static templates - +Browser: Reset (browser) `:sup:`0` <#sdfootnote14sym>`_ - Browser v4.5 (browser) `:sup:`0` <#sdfootnote15sym>`_ |img-5| |img-5| .. _Edit-your-former-TypoScript-recommended: Edit your former TypoScript (recommended) """"""""""""""""""""""""""""""""""""""""" .. _Example-Organiser-in-version-4-6: Example Organiser in version < 4.6 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Constants plugin.tx\_browser\_pi1.map { enabled = 1 field { linktoSingle = tx\_org\_headquarters.uid latitude = tx\_org\_headquarters.mail\_lat longitude = tx\_org\_headquarters.mail\_lon description = tx\_org\_headquarters.title category = tx\_org\_headquarterscat.title categoryIcon = tx\_org\_headquarterscat.icons } path { categoryIcon = uploads/tx\_org/ } width = 700 navigation { showUid = headquartersUid } } See an example for a configuration from version 4.6 on the next page. Setup The configuration of the properties below are configured by the Constant Editor now. Please remove this configuration in your list and single view. If you are need it, please inspect your TypoScript with the TypoScript Object Browser. Some properties are moved from the TEXT content object to a COA. The TypoScript below causes errors. plugin.tx\_browser\_pi1 { ... views { list { 501 = +Org: Headquarters 501 { ... navigation { map < plugin.tx\_browser\_pi1.navigation.map map { marker { addToCData { system { mapLinkToSingle { 10 { 30 { 10 { wrap = ,&tx\_browser\_pi1[headquartersUid]=\| } } } } } } variables { system { categoryIconMap { 20 { stdWrap { listNum = 1 } } } ... } } } } } } } } } See an example for a configuration from version 4.6 on the next page. .. _Example-Organiser-in-version-from-4-6: Example Organiser in version from 4.6 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Constants plugin.tx\_browser\_pi1 { map { aliases { showUid { marker = headquartersUid } } controlling { enabled = Map } design { path { categoryIcon = uploads/tx\_org/ } width = 700 } icon { listNum { categoryIconMap = 1 categoryIconMapSingle = 2 } } marker { field { linktoSingle = tx\_org\_headquarters.uid latitude = tx\_org\_headquarters.mail\_lat longitude = tx\_org\_headquarters.mail\_lon description = tx\_org\_headquarters.title category = tx\_org\_headquarterscat.title categoryIcon = tx\_org\_headquarterscat.icons categoryOffsetX = tx\_org\_headquarterscat.icon\_offset\_x categoryOffsetY = tx\_org\_headquarterscat.icon\_offset\_y } } } } Setup plugin.tx\_browser\_pi1 { ... views { list { 501 = +Org: Headquarters 501 { ... showUid = headquartersUid select ( tx\_org\_headquarters.title, ... tx\_org\_headquarters.mail\_lat, tx\_org\_headquarters.mail\_lon, tx\_org\_headquarterscat.title, tx\_org\_headquarterscat.icons tx\_org\_headquarterscat.icon\_offset\_x, tx\_org\_headquarterscat.icon\_offset\_y ) navigation { map < plugin.tx\_browser\_pi1.navigation.map map { marker { variables { system { description > description < plugin.tx\_browser\_pi1.displayList.master\_templates.ma p.descriptionWiLinkToSingle } } } } } } } } .. _TypoScript-for-own-corporate-design-4-6: TypoScript for own corporate design < 4.6 """"""""""""""""""""""""""""""""""""""""" The JavaScript configuratuion is changed with TYPO3 Browser version 4.6. Below you find the proper code for the version below 4.6. See the proper code from version 4.6 at section "Custom Code" on page 22 above. - blue: unchanged code - red: code up to version smaller than 4.6 - green: code from version 4.6 plugin.tx\_browser\_pi1 { views.list.501.navigation.map.marker.snippets.html.dynamic.map\_jss.30 .20 { value ( language : '###OXMAPCONFIGLANGUAGE###' // default \| en \| de , modules : '###OXMAPCONFIGMODULES###' // OSM.CDmap,OSM.Base,OSM.Filter , wms : '###OXMAPCONFIGWMS###' // OSM , type : '###OXMAPCONFIGTYPE###' // Mapnik \| ROADMAP , imagePath : '###OPENLAYERSIMGPATH###' , cssPath : '###OPENLAYERSCSS###' //, center : [ 11.322578,50.98098 ] // TYPO3 Browser < 4.6 , center : { lon : 11.322578, lat : 50.98098 } , startLevel : '###OXMAPCONFIGSTARTLEVEL###' , mapZoomWheel : '###OXMAPCONFIGMAPZOOMWHEEL###' , numZoomLevels : '###OXMAPCONFIGNUMZOOMLEVELS###' //, filter : '#oxMapFilter' // TYPO3 Browser < 4.6 , filter : { wrapper : '{$plugin.tx\_browser\_pi1.map.html.form.id}' } //, filterItems : '.oxMapFilter' // TYPO3 Browser < 4.6 //, mapID : 'oxMapArea' // TYPO3 Browser < 4.6 , mapID : '{$plugin.tx\_browser\_pi1.map.html.id}' , mapControls : '###OXMAPCONFIGMAPCONTROLS###' , mapMarker : '###OXMAPCONFIGMAPMARKER###' // standalone marker is allowed , mapMarkerInfo : '###OXMAPCONFIGMAPMARKERINFO###' // marker with infolayer , mapMarkerEvent : '###OXMAPCONFIGMAPMARKEREVENT###' // click \| hover \| on //, custom : { // TYPO3 Browser < 4.6 , customMap : { type: 'Image' , size: { // w: {$plugin.tx\_browser\_pi1.map.width} // TYPO3 Browser < 4.6 //, h: {$plugin.tx\_browser\_pi1.map.height} // TYPO3 Browser < 4.6 w: {$plugin.tx\_browser\_pi1.map.design.width} , h: {$plugin.tx\_browser\_pi1.map.design.height} } , bounds : { // define bounds for pan inside a smaller area w: 11.29976 , s: 50.95955 , e: 11.35304 , n: 50.99803 } , imageType : 'png' // SVG is in progress , png : { 0: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2.le vel0.png' , 1: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2. level1.png' , 2: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2. level2.png' } , svg : { 0: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2.le vel0.svg' , 1: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2. level1.svg' , 2: 'fileadmin/user\_upload/browser/test\_osm\_uniweimar/ci\_map\_v2. level1.svg' } , numZoomLevels : '###OXMAPCONFIGNUMZOOMLEVELS###' , startLevel : '###OXMAPCONFIGSTARTLEVEL###' } ) } } .. _Development: Development ----------- This section is for BrowserMaps developers only. .. _Workflow: Workflow ^^^^^^^^ BrowserMaps - fetchs the map HTML template from map.template.fileThis template is a frame only. See section "HTML" on page 25 above. - renders the HTML subpart of the form (if there a categories for a form) map.marker.snippets.html.categories filter\_formHTML code for the form.The marker ###INPUTS### will replaced with all needed input fields.An input field is extended with an label and an image.Content depends of data delivered by the database.Usually you don't have to develop nothing here. - renders the HTML subpart of the map map.marker.snippets.html.dynamic - map\_css (CSS for the map)CSS inline file for the map.This CSS should changed only, if it isn't complete or it isn't proper or is deprecated. - map\_html (HTML div tag for the map)One line HTML code with the div- Tag for the map.Usually you don't have to develop nothing here. - map\_jss (Javascript for the map)JSS inline file with code for the map.The JSS script links to the external and static JSS script:– OpenLayers\_x.x.x.js– OpenStreetMap\_x.x.x.js– oxRenderMap\_x.x.x.jsAnd the JSS script contains all other code, which get content while runtime depending of the data in the database.Usually you have to develop BrowserMaps here. .. _Coding: Coding ^^^^^^ .. _Dynamic-CSS: Dynamic CSS """"""""""" You can allocate values from the database to the CSS inline file (see above) while runtime. You can use marker like ###MARKER###. Each marker will replaced with the corresponding value from map.marker.variables.dynamic (see "Variables" on page 52 below). .. _JavaScript: JavaScript """""""""" If you want to code JavaScript, probably you have to code the JSS snippet of the TypoScript property: map.marker.snippets.html.dynamic.map\_jss (see above) You can use marker like ###MARKER###. Each marker will replaced with the corresponding value from map.marker.variables.dynamic (see "Variables" on page 52 below). .. _Variables: Variables """"""""" You can configure any user-defined variables by TypoScript. The possibilities are limited by the possibilities of TypoScript only. The configuration array is devided in two parts: - dynamic - system If you like to create a user-defined variable, please use the dynamic property only. See map.marker.variables.dynamic .. _Using-the-map-API-without-TYPO3: Using the map API without TYPO3 ------------------------------- BrowserMaps is using oxMap – a map API, which is independent on TYPO3 and independent on the TYPO3 Browser. .. _oxMap: oxMap ^^^^^ oxMap is a JavaScript frontend plugin. If you like to use the API with another CMS than TYPO3 or without any CMS, please refer to `http://oxmap.de `_ You will get more information about the project and the properties. oxMap is developed by Mike Kunert. See more at "BrowserMaps Developer Team" on page 56 below. .. _Credits: Credits ------- Thanks to .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _AWO-Kreisverband-Mittelrhein: AWO Kreisverband Mittelrhein """""""""""""""""""""""""""" The German Arbeiterwohlfahrt (AWO) Kreisverband Mittelrhein has contracted a part of automatic geocoding and optimization for touch- screens. `http://www.awo-mittelrhein.de/ `_ .. _Bauhaus-University-of-Weimar: Bauhaus University of Weimar """""""""""""""""""""""""""" The Bauhaus University of Weimar (Bauhaus-Universität Weimar) contracted the custom layer feature. `http://www.uni-weimar.de/ `_ .. _Made-in-Nature: Made in Nature """""""""""""" The German TYPO3 agency Made in Nature has contracted a part of the initial release of the extension TYPO3 Route. `http://made-in-nature.de/ `_ .. _State-Development-Corporation-of-Thuringia: State Development Corporation of Thuringia """""""""""""""""""""""""""""""""""""""""" The State Development Corporation of Thuringia (Landesentwicklungsgesellschaft Thürigen) contracted the initial release and some features of BrowserMaps. `http://www.leg-thueringen.de/ `_ .. _BrowserMaps-Developer-Team: BrowserMaps Developer Team -------------------------- .. _generated: ((generated)) ^^^^^^^^^^^^^ .. _Dirk-Wildt: Dirk Wildt """""""""" Leader Did the job of complete integration into the Browser. |img-9| Illustration 33: Dirk Wildt a little bit blurred Dirk Wildt (\* 1963 Hamburg/Germany) Founder of `Die Netzmacher `_ (Erfurt/Weimar) Founder of `TYPO3 Usergroup Thuringia `_ Member of `TYPO3 Usergroup Leipzig `_ 2003: Founding `think visually! `_ It is `Die Netzmacher `_ since 2009. 2000 - 2002: Financial Controller, `G.E.B.B `_ 1999 - 2000: Financial Controller, `G\|M\|Z - Tagesspiegel-Gruppe `_ 1997 - 1999: Spokesman, `Senatsverwaltung für Finanzen, Berlin `_ 1989 - 1997: Editor and Financial Controller, `taz, die tageszeitung `_ 1982 - 1989: Freelancing Press Photographer .. _Ulfried-Herrmann: Ulfried Herrmann """""""""""""""" Member |img-10| Illustration 34:Ulfried Herrmann Ulfried Herrmann (\* 1981 Ilmenau/Germany) Founder of `TYPO3 Usergroup Thuringia `_ Member of `TYPO3 Usergroup Leipzig `_ 2012: Webmaster of the Bauhaus University Weimar 2009: Founding `Die Netzmacher GbR `_ 2001: Founding `yellow label `_ .. _Mike-Kunert: Mike Kunert """"""""""" Member Mike is the developer of oxMap, the map API of BrowserMaps |img-11| Illustration 35:Mike Kunert Mike Kundert (\* 1976 Bernau bei Berlin/Germany) Frontend- and JavaScript-Developer Cartographer See - `http://oxmap.de `_ - `http://webkartografie.de `_ .. _FAQ: FAQ --- .. _Illegal-character-in-a-JSON-array: Illegal character in a JSON array? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The data for the map marker are provided as a JSON array. If you have configured to clean up XHTML, you can get trouble: The TYPO3 API will mask special characters a second time in some cases. One of these cases is: - You have an HTML link in the JSON array like: - The TYPO3 API renders it like: You will get a JavaScript error like:Illegal character: ... } If you have used page.config, please use this configuration additionally: page { config { xhtml\_cleaning > } } .. _May-I-use-AJAX: May I use AJAX? ^^^^^^^^^^^^^^^ There are some conflicts with AJAX. Please disable AJAX in the plugin / flexform of the Browser. See "Conflict with AJAX" on page 59 below. .. _Forum: Forum ----- |img-12| Illustration 36: The Browser Forum The Browser has its own forum. We speak English and German. You are welcome to post any question, bug or snippet code at TYPO3-Frontend-Engine Browser: Forum `http://typo3-browser-forum.de/ `_ .. _Known-Bugs: Known Bugs ---------- .. _Conflict-with-AJAX: Conflict with AJAX ^^^^^^^^^^^^^^^^^^ There is a conflict with AJAX unfortunately. .. _Workaround: Workaround """""""""" Please disable AJAX for single views: Plugin > jQuery & AJAX > AJAX [list view only] Please disable the record browser of the single view: Plugin > Single View > Record Browser [disabled] .. _To-Do-List: To-Do List ---------- Solve the conflict with AJAX. .. _Change-Log: Change Log ---------- 7.0.1 **Deprecated** 4.6.1 **Bugfixing** \* #47602: BrowserMaps: No icons without categories 4.5.15 **Improvement** \* #i0027: Renaming Constant Marker\* #51477: BrowserMaps: mobile navigationdisplayList.master\_templates.map.descri ptionWiLinkToSingle.30 moved from TEXT to COA 4.5.14 **Improvements** \* #i0025: Flash Messages GPX-Data Upload 4.5.13 **Features** \* #51477: BrowserMaps: mobile navigation\* #51478: BrowserMaps: automatic rendering of latitude and longitudeBugfix\* #51464: Whitespace in PHP file breaks XML (RSS) output 4.5.12 **Improvements** \* #i0024: alias for showUid is controlled by the Constant EditorNEW constant: plugin.tx\_browser\_pi1.navigation.showUidReplaced Constant:plugin.tx\_browser\_pi1.recordBrowser.uidName > plugin.tx\_browser\_pi1.navigation.showUid 4.5.11 **Improvements** \* #i0022: BrowserMaps: oxMap.Render\_1.3.07.js is added\* #i0021: BrowserMaps: CSS .tx- browser-pi1 .mapview-content: padding: 1em; moves to padding: 1em 0;\* #i0020: BrowserMaps: route row to cObj\* #i0019: BrowserMaps: cat devider\* #i0017: BrowserMaps: Constant Editor 4.5.8 **SECURITY FIX!** \* #i0017: if showUid has an alias it will removed from piVars too, if there is a security risk. **Improvements** \* #i0013: Different controlling of the URL for a marker or for a pathmapLinkToSingle\* #i0010: oxMap Route Categories **Bugfix** \* #i0015: oxMap Route Marker\* #i0012: DRS prompt, if Map +Routes is enabled by Constant Editorbut a Browser plugin doesn't have a proper SQL query 4.5.7 **SECURITY FIX!** \* #48859: Security fix **Feature** \* #47631: Route Interface oxMap\* #47630: Backend Routes\* #47628: BrowserMaps Route Integration: Integration GeoJSON\* #46062: BrowserMaps: Localisation of the form labels **Bugfix** \* #i0009: Bugfix oxMap Route Categories 4.5.6 **Feature** \* #47632: oxMap 1.3 for Routes\* Properties\* plugin.tx\_browser\_pi1.map.field.\* -> plugin.tx\_browser\_pi1.map.marker.field.\*\* Setup\* plugin.tx\_brows er\_pi1.navigation.map.configuration.categories.fields.category ->plug in.tx\_browser\_pi1.navigation.map.configuration.categories.fields.cat egory **Bugfix** \* #48613: Unproper URL for icons in Backend-Module 4.5.4 **Update Sponsors** 4.4.6 **Improvement** \* #42788: BrowserMaps will extended for Google Maps\* param mapZoomWheel is moved to zoomWheelEnable\* mapMarker and MarkerInfo removed 4.4.4 **Bugfix** \* #44849: BrowserMaps: dummy category in single- view\* dummy got a LL-value\* dummy is displayed only if there isn't any category 4.4.3 **Improvement** \* #44619: BrowserMaps: cHash in links to the single view 4.4.0 **New Feature** \* #42788: BrowserMaps will extended for Google Maps\* Moved files\* default\_0.0.9.tmpl -> default\_1.1.01.tmpl\* OpenLayers\_2.10.0 -> OpenLayers\_2.12\* oxMapConfig\_0.0.10.js -> oxMapConfig\_1.1.01.js\* oxRenderMap\_0.0.10.js -> oxRenderMap\_1.1.02.js\* ID of filter is moved from filter to oxMapFilter\* TypoScript constants are moved from ... to ...\* zoomLevel.fixed -> zoomLevel.start\* TypoScript properties are moved from ... to ...\* MapControls -> oxMapConfigMapControls\* MapMarker -> oxMapConfigMapMarker\* MapMarkerInfo -> oxMapConfigMapMarkerInfo\* MapMarkerEvent -> oxMapConfigMapMarkerEvent\* MapZoomLevels -> oxMapConfigNumZoomLevels\* MapZoomWheel -> oxMapConfigMapZoomWheel\* OSMConfigCenter -> oxMapConfigCenter\* OSMConfigZoom -> oxMapConfigStartLevelEffected files:\* res/js/map/api\_1.1.02/\* new\* static\* constants.txt\* setup.txt\* t3jquery.txt **Improvement** \* #00000: Removed deprecated filesEffected files:\* res/js/map\* oxMapConfig\_0.0.9.js removed\* oxRenderMap\_0.0.9.js removed\* oxRenderMap\_0.0.10.js removed\* res/js/map/lib\* OpenLayers removed 4.1.25 **New Features** \* #42125: OpenStreetMap: offset for categoriesEffected files:\* pi1/class.tx\_browser\_pi1\_map.php\* static\* constants.txt\* setup.txt\* #42124: OpenStreetMap: improve performanceoxMapConfig\_0.0.9.js -> oxMapConfig\_0.0.10.jsoxRenderMap\_0.0.9.js -> oxRenderMap\_0.0.11.jsEffected files:\* static\* setup.txt\* t3jquery.txt **Bugfixing** \* #42566: BrowserMaps: remove the cat devider from categories\* #42565: Unproper result, if first children is 0, empty or nullEffected files:\* pi1/class.tx\_browser\_pi1\_consolidate.php 4.1.23 **New Features** \* #42173: OpenStreetMap: configurable zoomWheelEffected files:\* static\* constants.txt\* setup.txt\* #42172: OpenStreetMap: configurable event modeEffected files: see #42173\* #42126: OpenStreetMap: individual design of control panelEffected files: see #421734.1.22 **Bugfixing** \* #42127: OpenStreetMap: filter aren't proper in Internet Explorer 8oxMapConfig\_0.0.2.js -> oxMapConfig\_0.0.9.jsoxRenderMap\_0.0.2.js -> oxRenderMap\_0.0.9.jsEffected files:\* pi1/class.tx\_browser\_pi1\_map.php\* res/html/map/default\_0.0.9.tmpl\* static\* setup.txt\* downgrade/3.9.0/setup.txt\* t3jquery.txt\* #42128: OpenStreetMap: filter aren't proper while using the zoomEffected files: see #42127\* #42129: OpenStreetMap: tooltips aren't properEffected files: see #42127 4.1.20 **Improvement** \* #00000: oxRenderMap 0.0.9 4.1.17 **Bugfix** \* #00000: oxRenderMap 0.0.7 4.1.14 **Improvement** \* #00000: oxRenderMap 0.0.6 4.1.13: **New Features** \* #41057: OpenStreetMap with custom image layer; **Improvement** \* #00000: Update OpenLayers from 1.x to 2.10 4.1.7: **New Feature** Individual category icons 4.1.5: **Initial release** Tutorial .. _Illustration-Index: Illustration Index ------------------ Illustration 1: List view without own icons 4 Illustration 2: List view with own icons 4 Illustration 3: Single view without own icon 4 Illustration 4: Single view with own icon 4 Illustration 5: BrowserMaps is able to displays routes – paths and marker (POI) 5 Illustration 6: BrowserMaps with own corporate identity 6 Illustration 7: BrowserMaps with own corporate identity (cut-out) 6 Illustration 8: BrowserMaps with own corporate identity ...6 Illustration 9: ... and in another zoom level with Google Maps 6 Illustration 10: Map configuration supported by the TypoScript Constant Editor 7 Illustration 11: Category icons 7 Illustration 12: TYPO3 Route can calculate the geocoding of your address automatically. The illustration is an example with TYPO3 Route. 8 Illustration 13: Six good ideas 10 Illustration 14: BrowserMaps flyer (German) 11 Illustration 15: Workflow of the most other map applications 12 Illustration 16: Workflow of BrowserMaps 12 Illustration 17: Page tree example 15 Illustration 18: TypoScript Constant Editor 16 Illustration 19: BrowserMaps with own corporate identity 20 Illustration 20: BrowserMaps with own corporate identity (cut-out) 20 Illustration 21: TypoScript Constant Editor 24 Illustration 22: Select the task: Browser Geoupdate 33 Illustration 23: Edit the task: Browser Geoupdate 34 Illustration 24: Start the task manually: Browser Geoupdate 34 Illustration 25: Prompts 35 Illustration 26: Report by e-mail 35 Illustration 27: Logging of the task Browser Geoupdate 36 Illustration 28: Enabling the DRS - the Development reporting System 37 Illustration 29: The DRS report enables you to follow the work-flow of BrowserMaps. 38 Illustration 30: Legend (1) and points (2) 41 Illustration 31: Default 48 Illustration 32: Downgrade (quick and dirty) 48 Illustration 33: Dirk Wildt a little bit blurred 56 Illustration 34:Ulfried Herrmann 56 Illustration 35:Mike Kunert 56 Illustration 36: The Browser Forum 58 `0 <#sdfootnote1anc>`_ oxMap is the map engine of the Browser – TYPO3 without PHP – until version 6.x `0 <#sdfootnote2anc>`_ oxMap is the map engine of the Browser – TYPO3 without PHP – until version 6.x `0 <#sdfootnote3anc>`_ Supported by the Google Geocode API `0 <#sdfootnote4anc>`_ Fit but under development `0 <#sdfootnote5anc>`_ `http://openlayers.org/ `_ `0 <#sdfootnote6anc>`_ oxMap is the engine for the frontend rendering. See details at section "oxMap" on page 54 below. `0 <#sdfootnote7anc>`_ This statement depends on the current licence and is without commitment. This statement can be wrong. It's your job, to check, if the using of a map application is according to any licence agreement. `0 <#sdfootnote8anc>`_ This statement depends on the current licences and is without commitment. This statement can be wrong. It's your job, to check, if the using of the Browser Maps application is according to any licence agreement. `0 <#sdfootnote9anc>`_ Organiser: the TYPO3 extension for the lobby and for the organisers. `0 <#sdfootnote10anc>`_ Headquarters: "Standorte" in German `0 <#sdfootnote11anc>`_ dito `0 <#sdfootnote12anc>`_ Format is recommended but not obligate. It is helpful in case of debugging. `0 <#sdfootnote13anc>`_ There is another option [Map +Routes]. Map +Routes is a map with routes and marker. Please refer ro the manual of TYPO3 Routes, if you like to configure Map +Routes. See `http://typo3.org/extensions/repository/view/route/ `_ `0 <#sdfootnote14anc>`_ All Browser configuration will removed `0 <#sdfootnote15anc>`_ Browser TypoScript of version 4.5.4 64 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.jpeg .. :border: 0 .. :height: 20 .. :id: Grafik2 .. :name: Grafik2 .. :width: 69 .. |img-3| image:: img-3.png .. :align: bottom .. :border: 0 .. :height: 16 .. :id: graphics25 .. :name: graphics25 .. :width: 18 .. |img-4| image:: img-4.png .. :align: bottom .. :border: 0 .. :height: 268 .. :id: graphics12 .. :name: graphics12 .. :width: 302 .. |img-5| image:: data: :alt: Frame1 .. :align: bottom .. :id: Frame1 .. :name: Frame1 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :id: graphics16 .. :name: graphics16 .. :width: 100% .. |img-7| image:: img-7.jpeg .. :align: left .. :border: 0 .. :height: 472 .. :id: graphics22 .. :name: graphics22 .. :width: 227 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 104 .. :id: graphics8 .. :name: graphics8 .. :width: 227 .. |img-9| image:: img-9.jpeg .. :align: left .. :border: 0 .. :height: 132 .. :id: graphics20 .. :name: graphics20 .. :width: 100 .. |img-10| image:: img-10.jpeg .. :align: left .. :border: 0 .. :height: 132 .. :id: graphics21 .. :name: graphics21 .. :width: 100 .. |img-11| image:: img-11.jpeg .. :align: left .. :border: 0 .. :height: 132 .. :id: graphics19 .. :name: graphics19 .. :width: 100 .. |img-12| image:: img-12.jpeg .. :align: left .. :border: 0 .. :height: 161 .. :id: graphics81 .. :name: graphics81 .. :width: 302