';
var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat(currentFeature.geometry.coordinates)
.setHTML(stringContent)
.addTo(map);
}
mapboxgl.accessToken = 'pk.eyJ1IjoibXNtaXRoLW5idGJjaS1jb20iLCJhIjoiY2p1bGU2YmJxMjYzNzQ0dWpvcDhhb3ZtNyJ9.PpZWortMqQ-LrLWPAM2rYA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-74.57, 42.91],
zoom: 6
});
var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
countries: 'us',
placeholder: 'Search by Address, City, State or Zip',
mapboxgl: mapboxgl
});
map.addControl(geocoder);
var url = '../../content/branchResults.html';
var json = (function () {
var json = null;
$.ajax({
'async': false,
'global': false,
'url': url,
'dataType': "json",
'success': function (data) {
json = data;
}
});
return json;
})();
map.addControl(new mapboxgl.NavigationControl());
map.on("load", function () {
map.loadImage('../../library/img/branch-marker.png', function (error, image) {
if (error) throw error;
map.addImage('branch', image);
map.addSource('branches', {
type: 'geojson',
data: url
});
map.addLayer({
id: 'source',
type: 'symbol',
source: 'branches',
"layout": {
'icon-image': 'branch',
'icon-size': 1
}
});
map.addSource('single-point', {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": []
}
});
map.addLayer({
"id": "point",
"source": "single-point",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
geocoder.on('result', function (ev) {
map.getSource('single-point').setData(ev.result.geometry);
});
buildLocationList(json)
});
});
// Add an event listener for when a user clicks on the map
map.on('click', function (e) {
// Query all the rendered points in the view
var features = map.queryRenderedFeatures(e.point, { layers: ['source'] });
if (features.length) {
var clickedPoint = features[0];
// 1. Fly to the point
flyToStore(clickedPoint);
// 2. Close all other popups and display popup for clicked store
createPopUp(clickedPoint);
// 3. Highlight listing in sidebar (and remove highlight for all other listings)
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
// Find the index of the store.features that corresponds to the clickedPoint that fired the event listener
var selectedFeature = clickedPoint.properties.address;
for (var i = 0; i 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup().setLngLat(coordinates).setHTML(stringContent).addTo(map);
});
*/
map.on('mouseenter', 'source', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'source', function () {
map.getCanvas().style.cursor = '';
});
