Hello everyone,
I'm bringing an alternative to Googlemaps, with the free solution of Leaflet (https://leafletjs.com/).
In the page where the Admin is supposed to indicate the coordinates, it is necessary to add the code below, within <cms: template>:
As you can see, there's two <cms:editable/>, one for the longitude and another for the latitude.
The Leaflet map will show on the Admin page and you'll be able to click anywhere on the map, changing the position on the marker. Every time you click on the map, two thing will happen. One, a pop-up will show up stating the coordinates selected and two, the coordinates will be showed on the <cms:input type="text">. Very important for this to work: You'll need to copy the coordinates from the <cms:input type="text"> and paste it in the <cms:editable/>.
To show the selected map in the front end, you'll need to the following code:
The map will be showed with the coordinates that have been inputted before.
As you can see, I've disabled the "zoom" option on the front-end. If you want your user to be able to zoom in the map, just substitute the following "script" on the front end for the next code:
Hope it can help someone!
I'm bringing an alternative to Googlemaps, with the free solution of Leaflet (https://leafletjs.com/).
In the page where the Admin is supposed to indicate the coordinates, it is necessary to add the code below, within <cms: template>:
- Code: Select all
<cms:editable label="Fill Latitude" type="text" name="lat" id="lat" />
<cms:editable label="Fill Longitude" type="text" name="lng" id="lng" />
<cms:editable name='gmap' type='message' >
<blockquote><p style="font-size: 18px">Get location data to fill in the cells above:</p></blockquote>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<label><b>Search Latitude</b></label>
<cms:input type="text" name="lat" id="lat" />
<label><b>Search Longitude</b></label>
<cms:input type="text" name="lng" id="lng" />
<div id="mapid" style="width:100%;height:400px;" class="shadow"></div>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script>
var mymap = L.map('mapid');
var mmr = L.marker([0,0]);
mmr.bindPopup('0,0');
mmr.addTo(mymap);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);
sm(38.736946,-9.142685,6);
mymap.on('click', onMapClick);
//Sets Coordinates with a click on the map
function onMapClick(e) {
mmr.setLatLng(e.latlng);
setui(e.latlng.lat,e.latlng.lng,mymap.getZoom());
}
function sm(lt,ln,zm) {
setui(lt,ln,zm);
mmr.setLatLng(L.latLng(lt,ln));
mymap.setView([lt,ln], zm);
}
function setui(lt,ln,zm) {
lt = Number(lt).toFixed(6);
ln = Number(ln).toFixed(6);
mmr.setPopupContent(lt + ' , ' + ln).openPopup();
document.getElementById("lat").value=lt;
document.getElementById("lng").value=ln;
}
</script>
</cms:editable>
As you can see, there's two <cms:editable/>, one for the longitude and another for the latitude.
The Leaflet map will show on the Admin page and you'll be able to click anywhere on the map, changing the position on the marker. Every time you click on the map, two thing will happen. One, a pop-up will show up stating the coordinates selected and two, the coordinates will be showed on the <cms:input type="text">. Very important for this to work: You'll need to copy the coordinates from the <cms:input type="text"> and paste it in the <cms:editable/>.
To show the selected map in the front end, you'll need to the following code:
- Code: Select all
<link rel="stylesheet" href="//unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<style>#mapid { height: 400px; }</style>
<div id="mapid"></div>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script>
var mymap = L.map('mapid', { zoomControl:false , doubleClickZoom:false , scrollWheelZoom:false } ).setView([<cms:show lat/>, <cms:show lng/>], 14);
var circle = L.circle([<cms:show lat/>, <cms:show lng/>], {
color: 'rgb(16, 92, 108)',
fillColor: '#16a085',
fillOpacity: 0.5,
radius: 300
}).addTo(mymap);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);
</script>
The map will be showed with the coordinates that have been inputted before.
As you can see, I've disabled the "zoom" option on the front-end. If you want your user to be able to zoom in the map, just substitute the following "script" on the front end for the next code:
- Code: Select all
<script>
var mymap = L.map('mapid').setView([<cms:show lat/>, <cms:show lng/>], 14);
var circle = L.circle([<cms:show lat/>, <cms:show lng/>], {
color: 'rgb(16, 92, 108)',
fillColor: '#16a085',
fillOpacity: 0.5,
radius: 300
}).addTo(mymap);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);
</script>
Hope it can help someone!
