Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
2 posts Page 1 of 1
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>:

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: '&copy; <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: '&copy; <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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
    }).addTo(mymap);
    </script>


Hope it can help someone!
@Reddragon, thank you for your solution. I tested your backend code and it works great!

I have made some changes for the CouchCMS 2.0+ backend: instead of editable type 'message' (which does not execute its content dynamically on page load) I used new Couch2 features and removed unnecessary inputs. Now values are auto-saved in editables without manual copy-paste. Also added class 'field' to add top margin.

2018-12-10-001.png
Admin map
2018-12-10-001.png (427.53 KiB) Viewed 3514 times
2 posts Page 1 of 1