OpenStreetMap extension

With the OpenStreetMap extension, you can create OpenStreetMap mashups easily. You can generate a report object with a OpenStreetMap with markers placed in the map. The marker's speech bubble can contain your own data. Placement of the pins can be done by using location data (latitude & longitude) or simply pass the address on as a location.

OpenStreetMap can use different tile servers on top of the data. You can use them as alternative for OpenStreetMap's own tiles.

myDBR uses Leaflet JavaScript library as API to OpenStreetMap. For heatmaps, myDBR uses Leaflet plugin Leaflet heat.

Map bubbles can be customized with Leaflet.ExtraMarkers

Commands

dbr.openstreetmap - Show OpenStreetMap
dbr.openstreetmap.heatmap - Use OpenStreetMap layer
dbr.openstreetmap.tiles - Use alternative tiles on top of OpenStreetMap
dbr.openstreetmap.geojson - Include GeoJSON-file into the maps

Syntax

select 'dbr.openstreetmap', 'coordinates' | 'address' {,title, width, height, zoom}
select 'dbr.openstreetmap.heatmap', 1[, leafletheat_options]
select 'dbr.openstreetmap.tiles', tile_server_url [, tiles_options]
select 'dbr.openstreetmap.geojson', url_to_geojson_file

Using address bubble:
select address, bubble_html

Using latitude/longitude bubble:
select latitude, longitude, [bubble_html [, '{bubble_options}']]

Using latitude/longitude-based heatmap:
select latitude, longitude [, PointWeight] }

Using address-based heatmap:
select address [, PointWeight]

Where:

Leafletheat_options
Optional options for Leaflet heat like "{radius: 25}"
Property Description
minOpacity the minimum opacity the heat will start at
maxZoom zoom level where the points reach maximum intensity (as intensity scales with zoom), equals maxZoom of the map by default
max maximum point intensity, 1.0 by default
radius radius of each "point" of the heatmap, 25 by default
blur amount of blur, 15 by default
gradient color gradient config, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}
tiles_options
Optional options required by the used tiles server
PointWeight
The PointWeight object allows you to additionally specify a weight for that data point. Applying a weight to a data point will cause the PointWeight to be rendered with greater intensity. The default weight is 1
bubble_options
Bubble options are the options defined in Leaflet.ExtraMarkers
Property Description Default Value Possible values
extraClasses Additional classes in the created <i> tag '' fa-rotate90 myclass; space delimited classes to add
icon Name of the icon with prefix '' fa-coffee (see icon library's documentation)
iconColor Color of the icon 'white' 'white', 'black' or css code (hex, rgba etc)
innerHTML Custom HTML code '' <svg>, images, or other HTML; a truthy assignment will override the default html icon creation behavior
markerColor Color of the marker (css class) 'blue' 'blue', 'red', 'orange-dark', 'orange', 'yellow', 'blue-dark', 'cyan', 'purple', 'violet', 'pink', 'green-dark', 'green', 'green-light', 'black', or 'white'
number Instead of an icon, define a plain text '' '1' or 'A', must set icon: 'fa-number'
prefix The icon library's base class 'glyphicon' 'fa' (see icon library's documentation)
shape Shape of the marker (css class) 'circle' 'circle', 'square', 'star', or 'penta'

Usage

Sample map with address

/* Mashup based on address */
select 'dbr.openstreetmap', 'address';

select 'Paris', 'Paris, France';

Sample map with latitude and longitude

/* Map based on address */
select 'dbr.openstreetmap', 'address';

select 'Paris', 'Paris, France';

Sample map with latitude and longitude

/* Map based on coordinates */
select 'dbr.openstreetmap', 'coordinates';

select latitude, longitude, bubble_html
from mydb.cities;

Using Heatmaps

select 'dbr.openstreetmap', 'coordinates','', 900, 500;
select 'dbr.openstreetmap.heatmap', 1;


select lat, lng, weight
from heatmap;

Customizing markers

Adding FontAwsome icons (included in myDBR) into the markers

select 'dbr.openstreetmap', 'coordinates', '', 400, 220;

select 33.005, -117.270, '', "{icon: 'fa-spinner',shape: 'circle',markerColor: 'red',prefix: 'fa',extraClasses: 'fa-spin'}"
union
select 33.005, -117.265, '', "{icon: 'fa-coffee',shape: 'square',markerColor: 'orange-dark',prefix: 'fa',iconColor: 'black'}"
union
select 33.005, -117.260, '', "{icon: 'fa-cog',shape: 'star',prefix: 'fa',markerColor: 'blue',iconColor: 'white'}"
union
select 33.005, -117.255, '', "{icon: 'fa-spinner',shape: 'penta',markerColor: 'green-dark',iconColor: 'white', prefix: 'fa'}"
;

Using different tile layers

With OpenSteetMap you can use different tile layers in the map. In the example we'll use MapBox's tile layer. To use the tile layers, you pass the URL to the tile layer with the dbr.openstreetmap.tiles-command with optional options. In the example we'll choose run-bike-hike-layer by passing the "id:'mapbox.run-bike-hike'" option to MapBox.

select 'dbr.openstreetmap', 'address', 'Marinwood run-bike-hike tile', 500, 500, 13;
select 'dbr.openstreetmap.tiles', 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', 
  "id:'mapbox.run-bike-hike'";

select 'Marinwood', 'Marinwood';

Embedding GeoJSON files

You can also extend the map by including GeoJSON files to the map

select 'dbr.openstreetmap', 'address', 'Chicago', 700, 850;
select 'dbr.openstreetmap.geojson', 'user/chicago.geojson';


select 'Chicago', 'chicago';

Geocode caching

myDBR will cache the geocode results (address to latitude/longitude conversion) into mydbr_geocode-table. One can disable the feature with $mydbr_defaults['geocode']['cache']-option.