Sample map with address

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

select 'Paris', 'Paris, France';

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

select 'Paris', 'Paris, France';

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

select latitude, longitude, bubble_html
from mydb.cities;

You can mix latitude and longitude or with address. If the latitude is null, myDBR will use the address.

select 'dbr.openstreetmap', 'coordinates_address';

select null, null, 'Chicago', 'City of Chicago'
union
select 40.7127837,-74.0059413, null,  "New York";

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'}"
;

By using 'iconUrl'-attribute, myDBR will use the bubble_options as Leaflet-icon attributes. See Leaflet documentation for Markers With Custom Icons.

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

select 33.005, -117.265, '', "{iconUrl: 'user/images/warning.gif', iconSize: [32, 32]}";

With OpenStreetMap, 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';

You can also extend the map by including GeoJSON files to the map. Geojson options can be added for more functionality.

In the example we'll utilize the onEachFeature-functionality, which invokes the function for each geojson-feature (in this case the official neighborhoods of Amsterdam). We'll attach actions for mouse hovering and create a linked report to each feature. The feature.properties are part of the included geojson file.

create procedure sp_DBR_amsterdam()
begin
  
select 'dbr.javascript', 'function onEachFeature(feature, layer) {
layer.bindTooltip(feature.properties.CBS_Wijkcode+": "+feature.properties.Gebied).openTooltip();

layer.on("mouseover", function () {
  this.setStyle({
    "fillColor": "#ff0000",
    "color" : "#BD4267"
  });
});
layer.on("mouseout", function () {
  this.setStyle({
    "fillColor": "#0000ff",
    "color" : "#3388ff"
  });
});
layer.on("click", function () {
  // Open report in a poup. Get the generic JS call and pass the Gebied to it
  // remove the preceding "javascript:" and add the CBS_Wijkcode as parameter
  // You can use browser debugger to see what is going on
  var url=$(".mapurl").attr("href").substr(11).replace("&e1=1", "&u1="+feature.properties.CBS_Wijkcode);
  eval(url);
});

}';

select 'dbr.openstreetmap', 'address', 'Amsterdam', 700, 450;
select 'dbr.openstreetmap.geojson', 'internal/amsterdam_wijk_lng_lat.json', '{onEachFeature:onEachFeature}';

select 'Amsterdam';

/* Generate an URL for the report link */
select 'dbr.report', 'sp_DBR_amsterdam_wijkcode', 'popup', 'inWijkcode<=1';
select 'dbr.button', '', 'hidden mapurl';

select 1;

end

Polygons are added on top of the existing map (coordinates/heatmap). If your map contains only polygons, use an empty result set for coordinates.

select 'dbr.openstreetmap.polygon', latlngs, options
from (
select '[[48.829469, 2.150573],[48.767051, 2.285156], [48.709994, 2.081909]]' as latlngs, "{color: 'red'}" as options
union
select "[[48.990130, 2.216491],[49.005447, 2.429351],[48.909864, 2.368927],[48.910767, 2.242584]]", "{color: 'blue'}"
) as q;

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

select 0, 0 limit 0;

The polygons can also contain multiple areas combined as one object:

select 'dbr.openstreetmap.polygon',  '
[
  [
    [51.504465, -0.042298],
    [51.503831, -0.04063],
    [51.50359, -0.04063],
    [51.503096, -0.041145],
    [51.503844, -0.042942]
  ],
  [
    [51.50359, -0.04063],
    [51.503470, -0.040346],
    [51.503226, -0.040598],
    [51.50334, -0.040890]
  ],
  [
    [51.50334, -0.040890],
    [51.503226, -0.040598],
    [51.502979, -0.040862],
    [51.503096, -0.041145]
  ],
  [
    [51.503470, -0.040346],
    [51.502999, -0.03916],
    [51.502502, -0.039675],
    [51.502979, -0.040862]
  ]
]
';

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

select 0, 0 limit 0;

In order to enhance performance, 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.