I would like to replace gmaps with Openstreet map in a fairly complex map design. It’s essentially a list of items that appear on a map with pins.
Can you kindly provide guidance or any hints how to start?
The map I am trying to convert is linked below.
Many thanks to the community in advance
(function ($) {
"use strict";
var markerIcon = {
anchor: new google.maps.Point(22, 16),
url: NgosList.marker_icon_url,
}
function mainMap() {
var locations = NgosList.map_locations;
var map = new google.maps.Map(document.getElementById('map-main'), {
zoom: 9,
scrollwheel: false,
center: new google.maps.LatLng(40.7, -73.87),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
panControl: false,
fullscreenControl: false,
navigationControl: false,
streetViewControl: false,
animation: google.maps.Animation.BOUNCE,
gestureHandling: 'cooperative',
styles: [{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#444444"
}]
}]
});
var boxText = document.createElement("div");
boxText.className = 'map-box';
var currentInfobox;
var boxOptions = {
content: boxText,
disableAutoPan: true,
alignBottom: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(-145, -45),
zIndex: null,
boxStyle: {
width: "260px"
},
closeBoxMargin: "0",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
};
var markerCluster, marker, i;
var allMarkers = [];
var clusterStyles = [{
textColor: 'white',
url: '',
height: 50,
width: 50
}];
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: markerIcon,
id: i
});
allMarkers.push(marker);
bounds.extend(marker.position);
var ib = new InfoBox();
google.maps.event.addListener(ib, "domready", function () {
cardRaining()
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
ib.setOptions(boxOptions);
boxText.innerHTML = locations[i][0];
ib.close();
ib.open(map, marker);
currentInfobox = marker.id;
var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
map.panTo(latLng);
map.panBy(0, -180);
google.maps.event.addListener(ib, 'domready', function () {
$('.infoBox-close').on("click", function (e) {
e.preventDefault();
ib.close();
});
});
}
})(marker, i));
}
map.fitBounds(bounds);
var options = {
imagePath: 'images/',
styles: clusterStyles,
minClusterSize: 2
};
markerCluster = new MarkerClusterer(map, allMarkers, options);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
$('.nextmap-nav').on("click", function (e) {
e.preventDefault();
map.setZoom(15);
var index = currentInfobox;
if (index + 1 < allMarkers.length) {
google.maps.event.trigger(allMarkers[index + 1], 'click');
} else {
google.maps.event.trigger(allMarkers[0], 'click');
}
});
$('.prevmap-nav').on("click", function (e) {
e.preventDefault();
map.setZoom(15);
if (typeof (currentInfobox) == "undefined") {
google.maps.event.trigger(allMarkers[allMarkers.length - 1], 'click');
} else {
var index = currentInfobox;
if (index - 1 < 0) {
google.maps.event.trigger(allMarkers[allMarkers.length - 1], 'click');
} else {
google.maps.event.trigger(allMarkers[index - 1], 'click');
}
}
});
$('.map-item').on("click", function (e) {
e.preventDefault();
map.setZoom(15);
var index = currentInfobox;
var marker_index = parseInt($(this).attr('href').split('#')[1], 10);
google.maps.event.trigger(allMarkers[marker_index], "click");
if ($(this).hasClass("scroll-top-map")) {
$('html, body').animate({
scrollTop: $(".map-container").offset().top + "-80px"
}, 500)
}
else if ($(window).width() < 1064) {
$('html, body').animate({
scrollTop: $(".map-container").offset().top + "-80px"
}, 500)
}
});
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);
function ZoomControl(controlDiv, map) {
zoomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv);
controlDiv.style.padding = '5px';
var controlWrapper = document.createElement('div');
controlDiv.appendChild(controlWrapper);
var zoomInButton = document.createElement('div');
zoomInButton.className = "mapzoom-in";
controlWrapper.appendChild(zoomInButton);
var zoomOutButton = document.createElement('div');
zoomOutButton.className = "mapzoom-out";
controlWrapper.appendChild(zoomOutButton);
google.maps.event.addDomListener(zoomInButton, 'click', function () {
map.setZoom(map.getZoom() + 1);
});
google.maps.event.addDomListener(zoomOutButton, 'click', function () {
map.setZoom(map.getZoom() - 1);
});
}
}
var map = document.getElementById('map-main');
if (typeof (map) != 'undefined' && map != null) {
google.maps.event.addDomListener(window, 'load', mainMap);
}
function singleMap() {
var myLatLng = {
lng: $('#singleMap').data('longitude'),
lat: $('#singleMap').data('latitude'),
};
var single_map = new google.maps.Map(document.getElementById('singleMap'), {
zoom: 14,
center: myLatLng,
scrollwheel: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
panControl: false,
navigationControl: false,
streetViewControl: false,
styles: [{
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"color": "#f2f2f2"
}]
}]
});
var marker = new google.maps.Marker({
position: myLatLng,
map: single_map,
icon: markerIcon,
title: 'Our Location'
});
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, single_map);
function ZoomControl(controlDiv, single_map) {
zoomControlDiv.index = 1;
single_map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(zoomControlDiv);
controlDiv.style.padding = '5px';
var controlWrapper = document.createElement('div');
controlDiv.appendChild(controlWrapper);
var zoomInButton = document.createElement('div');
zoomInButton.className = "mapzoom-in";
controlWrapper.appendChild(zoomInButton);
var zoomOutButton = document.createElement('div');
zoomOutButton.className = "mapzoom-out";
controlWrapper.appendChild(zoomOutButton);
google.maps.event.addDomListener(zoomInButton, 'click', function () {
single_map.setZoom(single_map.getZoom() + 1);
});
google.maps.event.addDomListener(zoomOutButton, 'click', function () {
single_map.setZoom(single_map.getZoom() - 1);
});
}
}
var single_map = document.getElementById('singleMap');
if (typeof (single_map) != 'undefined' && single_map != null) {
google.maps.event.addDomListener(window, 'load', singleMap);
}
})(this.jQuery);