Using leaflet for openstreetmap Integration

Bootstrap Studio Help
1

Beside my interest on how to make custom options in bootstrap available, I have some basic tips for openstreetmap integration available and plan of course to share it also online as a ready to use component. But as said, before I want to know, how to provide customizable components without any long instructions.

Openstreetmap integration is very straight forward (even I didn't get the preview in bootstrap studio app working, but in external preview works pretty well).

At any place you want to display a map (with location), place a **

<

div>** with an id:

<div id="osm-map" style="min-height: 450px;height: 450px;"></div>

Add the following css and js libraries to your project (I prefered to use lightweighted leaflet):

https://unpkg.com/leaflet@1.6.0/dist/leaflet.css 
https://unpkg.com/leaflet@1.6.0/dist/leaflet.js

Then you need craft your own - some simple - js to initiatlize the map (eg. RIGHT-CLICK Javascript in your Design pane and choose create osm-init.js):

// open streetmap integration with leaflet
$(function(){
  "use strict"; 
// osm-map the id of div area where map should be shown
var element = document.getElementById('osm-map');

// lat & long of center of map and marker 
var lat = '48.210033';
var long =  '16.363449';

// html info for popup on marker
popupHtml = '<b>Company Bro</b><br><br> Bro Street 1<br>A-1010 City<br>and we may place also a small image<img src="assets/img/yourimage for popup.jpeg" width="100%" />';

// Height can be set. Is done by style or css too.
// element.style = 'height:400px;';

// Create Leaflet map on map element.
var map = L.map(element, {scrollWheelZoom: false });

// Add Openstreetmap tile layer with attribution to the Leaflet map.
// this is important and worth to honor openstreetmap contributors
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Your target's GPS coordinates.
var target = L.latLng( lat , long );

// Set map's center to target with zoom 15.
map.setView(target, 15);

// Place a marker on the same location.
L.marker(target).addTo(map)
    .bindPopup(popupHtml,  '{keepInView: true}')
    .openPopup();

// Optional, but useful: change behaviour of autoscrollwheel
// only zoom after click, no autozoom on focus
map.scrollWheelZoom.disable();
map.on('click', () => { map.scrollWheelZoom.enable();});
map.on('mouseout', () => { map.scrollWheelZoom.disable();});
});

Attention: Take care on right order of your javascripts - osm-init.js should be after leaflet.js.

Open preview and have fun and some more fun on checking lot of options and other examples for displaying different layers and multiple popups, etc. !

As said, it would be a great opportunity for this usecase to have just 2-3 bss-data fields in the option pane (at least for the lat & long) ... but may be I provide the component just with some view instructions.

2

Here is another example how you can use leaflet in your bss design

Have a look

3

@gludie

In your posted example I found a error. You have a variable that is undefined.

// html info for popup on marker
popupHtml = '<b>Company Bro</b><br><br> Bro Street 1<br>A-1010 City<br>and we may place also a small image<img src="assets/img/yourimage for popup.jpeg" width="100%" />';

should be....

// html info for popup on marker
var popupHtml = '<b>Company Bro</b><br><br> Bro Street 1<br>A-1010 City<br>and we may place also a small image<img src="assets/img/yourimage for popup.jpeg" width="100%" />';
4

nice !

5

hi twinstream, thanks a lot - totally right - never should change working code after you copied it into a post ? in the meantime you can search also the online component with keyword “openstreemap”

thanks again twinstream for your “fix”