DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

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)

[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, <http://wildt.at.die- netzmacher.de>

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

Screenshots

Frontend

typo3-route.de

Frame1

Live example

BrowserMaps with own corporate identity
Bauhaus University Weimar

Frame1 Frame1

Live at http://typo3-browser.de/maps/weimar/

Companies in Thuringia

Frame1 Frame1

Live at http://typo3-browser.de/maps/leg/

Backend

TypoScript Constant Editor

Frame1

Category icons

Frame1

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

Frame1

See details at section "Automatic Geocoding" on page 30 below.

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?

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?

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

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?

  • 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

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

The Browser – TYPO3 without PHP – has more than 600 pages documentation (manual and tutorials). See:

http://typo3-browser.de/en/browser-tutorials/

Workflow

Frame1

a

Frame1

b

Frame1

Other map applications

a

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 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

a

The application can use features of the Google Maps API.

b

BrowserMaps can't use any feature of the Google Maps API.

No Privacy

a

Google Maps knows your data.

b

The map provider doesn't know, which data will provided with the map.

Licence

a

If you are using the Google Maps API like in the example above, the using of Google Maps is limited. :sup:`0 <#sdfootnote7sym>`_

b

The using of the maps delivered by Google Maps or OpenStreetMap is unlimited. :sup:`0 <#sdfootnote8sym>`_

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

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

Install

  • TYPO3 Organiser with the Organiser Installer or
  • TYPO3 Route

Follow the manuals.

Installation

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

Latitude and longitude

Your records must have both data: a latitude and a longitude.

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

Please add a page for publishing the map.

You must have a folder with your data.

Example

Frame1

You will have a page tree like in the illustration above:

  • Page Headquarters :sup:`0 <#sdfootnote10sym>`_ [1277]
  • Folder Headquarters :sup:`0 <#sdfootnote11sym>`_ [1284]

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

Please configure BrowserMaps with the TypoScript Constant Editor.

Frame1

Module: Web > Template

Page tree: Your page, which contains the Browser pluginand should display an OpenStreetMap

Edit area: [Constant Editor]

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

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

Category: [BROWSERMAPS – DESIGN]

Icons directoryhere: uploads/tx_org/

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

Category: [BROWSERMAPS – ALIASES]

If you are using an alias for showUid, please configure:

Label of a marker uidhere: headquartersUid

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

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

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

Add to your page Headquarters [1277] the Browser – TYPO3 without PHP - plugin.

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

Please evaluate the result of your configuration:

Tab [Plugin]

Tab [Plugin Check]

Snippets

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.

Frame1 Frame1

Live examples:

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

You have to extend the JavaScript code with the configuration for a custom image layer.

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

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

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.

Google Maps and OpenStreetMap

You can use both:

  • Google Maps
  • OpenStreetMap
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.

Frame1

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

Please refer to the extension TYPO3 Route at

http://typo3.org/extensions/repository/view/route/

Live example at

http://typo3-route.de/

Controlling

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

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

<!-- ###TEMPLATE_MAP### begin -->

###MAP_CSS###

<div class="mapview">

<div class="mapview-content">

###FILTER_FORM###

###MAP_HTML###

###MAP_JSS###

</div> <!-- /mapview-content -->

</div><!-- /mapview -->

<!-- ###TEMPLATE_MAP### end -->

TypoScript

plugin.tx_browser_pi1.navigation.map.marker.snippets.*

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BrowserMaps is using the Google Geocoding API.

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

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

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

ctrl.tx_browser.geoupdate

address

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:

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

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

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

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,
      ),
    ),
  ),
);

Scheduled task (cron job)

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

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
Select the geoupdate task

Frame1

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

Frame1

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

Frame1

Module: Admin Tools > Scheduler

Edit area: [Scheduled Tasks]

[X] Browser – TYPO3 without PHP – geoupdate.[Execute the selected tasks]

Frame1

You will receive some prompts.

Report by e-mail

Frame1

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

Frame1

The task prompts details to syslog. See

Module: Admin Tools > Log

Edit area: Prompts

DRS – Development Reporting System

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

Frame1

Module: Admin Tools > Extension Manager

Edit Area: Select the Browser extension

Tab [Configuration]

Category: [Debugging]

DRS – Development reporting System: [BrowserMaps]

[Update]

The DRS report

Precondition

You need the extension

Extension Development Evaluator (extdeveval)

Report

Frame1

Module: Admin Tools > Development Log

Edit Area: the report

Reference

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:

Map: global and local

map

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 {
            ...
          }
        }
      }
    }
  }
}

plugin.tx_browser_pi1.navigation.map

The map property is part of the top level navigation property.

Overview

The map has four properties on the top level.

map

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 {
        ...
      }
    }
  }
}

What's new?

See details in the section "Change Log" on page 61 below.

Version 4.6

Automatic Geocoding

[4.5.15]

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

[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

[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

[4.5.7]

You can publish routes – paths with marker (POI). See "Route" on page 24 above.

Version 4.5

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

[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

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

[4.4.0]

The API script is compressed by default. For debugging and development you can use the uncompressed files. See "Debugging" below.

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.

Version 4.3

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

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

From Version < 4.6 to 4.6

Constants have changed
Overview
Constants < 4.6

a

Constants < 4.6

b

Constants from 4.6

map.controls.debugging

a

map.controls.debugging

b

map.openlayers.controls.debugging

map.controls.default

a

map.controls.default

b

map.openlayers.controls.default

map.enabled

a

map.enabled

b

map.controlling.enabled

map.height

a

map.height

b

map.design.height

map.modules.debugging

a

map.modules.debugging

b

map.openlayers.modules.debugging

map.modules.default

a

map.modules.default

b

map.openlayers.modules.default

map.modules.routes.debugging

a

map.modules.routes.debugging

b

map.openlayers.modules.routes.debugging

map.modules.routes.default

a

map.modules.routes.default

b

map.openlayers.modules.routes.default

map.openLayers.css

a

map.openLayers.css

b

map.design.css

map.openLayers.imgPath

a

map.openLayers.imgPath

b

map.design.imgPath

map.path.categoryIcon

a

map.path.categoryIcon

b

map.design.path.categoryIcon

map.popup.behaviour

a

map.popup.behaviour

b

map.openlayers.popup.behaviour

map.provider

a

map.provider

b

map.controlling.provider

map.width

a

map.width

b

map.design.width

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

This section is for BrowserMaps developers only.

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

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

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

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

BrowserMaps is using oxMap – a map API, which is independent on TYPO3 and independent on the TYPO3 Browser.

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

Thanks to

((generated))

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

The Bauhaus University of Weimar (Bauhaus-Universität Weimar) contracted the custom layer feature.

http://www.uni-weimar.de/

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

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

((generated))

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

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

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

FAQ

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 will get a JavaScript error like:Illegal character: ...<a href="" http:..

Solution

Don't clean up your XHTML code.

TypoScript snippets

Solve the bug with this configuration:

config {

xhtml_cleaning >

}

If you have used page.config, please use this configuration additionally:

page {

config {

xhtml_cleaning >

}

}

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

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

Conflict with AJAX

There is a conflict with AJAX unfortunately.

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

Solve the conflict with AJAX.

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 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 oxMap is the map engine of the Browser – TYPO3 without PHP – until version 6.x

0 oxMap is the map engine of the Browser – TYPO3 without PHP – until version 6.x

0 Supported by the Google Geocode API

0 Fit but under development

0 http://openlayers.org/

0 oxMap is the engine for the frontend rendering. See details at section "oxMap" on page 54 below.

0 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 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 Organiser: the TYPO3 extension for the lobby and for the organisers.

0 Headquarters: "Standorte" in German

0 dito

0 Format is recommended but not obligate. It is helpful in case of debugging.

0 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 All Browser configuration will removed

0 Browser TypoScript of version 4.5.4

64