Add openstreetmap with a mapbox.com layer. #420

public/js/ff/tags/create-edit.js

@@ -9,8 +9,6 @@
 
 $(function () {
     "use strict";
-
-    $('#clearLocation').click(clearLocation);
     if (!Modernizr.inputtypes.date) {
         $('input[type="date"]').datepicker(
             {
@@ -18,102 +16,4 @@ $(function () {
             }
         );
     }
-
-});
-
-/*
- Some vars as prep for the map:
- */
-var map;
-var markers = [];
-var setTag = false;
-
-var mapOptions = {
-    zoom: zoomLevel,
-    center: new google.maps.LatLng(latitude, longitude),
-    disableDefaultUI: true
-};
-
-/*
- Clear location and reset zoomLevel.
- */
-function clearLocation() {
-    "use strict";
-    deleteMarkers();
-    $('input[name="latitude"]').val("");
-    $('input[name="longitude"]').val("");
-    $('input[name="zoomLevel"]').val("6");
-    setTag = false;
-    $('input[name="setTag"]').val('false');
-    return false;
-}
-
-function initialize() {
-    "use strict";
-    /*
-     Create new map:
-     */
-    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
-
-    /*
-     Respond to click event.
-     */
-    google.maps.event.addListener(map, 'rightclick', function (event) {
-        placeMarker(event);
-    });
-
-    /*
-     Respond to zoom event.
-     */
-    google.maps.event.addListener(map, 'zoom_changed', function () {
-        saveZoomLevel();
-    });
-    /*
-     Maybe place marker?
-     */
-    if (doPlaceMarker === true) {
-        var myLatlng = new google.maps.LatLng(latitude, longitude);
-        var fakeEvent = {};
-        fakeEvent.latLng = myLatlng;
-        placeMarker(fakeEvent);
-
-    }
-}
-
-/**
- * save zoom level of map into hidden input.
- */
-function saveZoomLevel() {
-    "use strict";
-    $('input[name="zoomLevel"]').val(map.getZoom());
-}
-
-/**
- * Place marker on map.
- * @param event
- */
-function placeMarker(event) {
-    "use strict";
-    deleteMarkers();
-    var marker = new google.maps.Marker({position: event.latLng, map: map});
-    $('input[name="latitude"]').val(event.latLng.lat());
-    $('input[name="longitude"]').val(event.latLng.lng());
-    markers.push(marker);
-    setTag = true;
-    $('input[name="setTag"]').val('true');
-}
-
-
-/**
- * Deletes all markers in the array by removing references to them.
- */
-function deleteMarkers() {
-    "use strict";
-    for (var i = 0; i < markers.length; i++) {
-        markers[i].setMap(null);
-    }
-    markers = [];
-}
-
-
-google.maps.event.addDomListener(window, 'load', initialize);
+});

public/js/ff/tags/show.js

@@ -11,34 +11,25 @@
 /*
  Some vars as prep for the map:
  */
-var map;
-var setTag = false;
-
-var mapOptions = {
-    zoom: zoomLevel,
-    center: new google.maps.LatLng(latitude, longitude),
-    disableDefaultUI: true,
-    zoomControl: false,
-    scaleControl: true,
-    draggable: false
-};
-
-
-function initialize() {
+$(function () {
     "use strict";
     if (doPlaceMarker === true) {
         /*
          Create new map:
          */
-        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
-        var myLatlng = new google.maps.LatLng(latitude, longitude);
-        var marker = new google.maps.Marker({
-                                                position: myLatlng,
-                                                map: map
-                                            });
-        marker.setMap(map);
+        // make map:
+       var mymap = L.map('tag_location_map', {zoomControl: false, touchZoom: false, doubleClickZoom: false, scrollWheelZoom: false, boxZoom: false, dragging: false}).setView([latitude, longitude], zoomLevel);
+
+        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+            maxZoom: 18,
+            id: 'mapbox.streets',
+            accessToken: mapboxToken
+        }).addTo(mymap);
+
+        if(doPlaceMarker) {
+            var marker = L.marker([latitude, longitude]).addTo(mymap);
+        }
     }
-}
-
-google.maps.event.addDomListener(window, 'load', initialize);
+});