I have a simple text submit field on one page. The goal is to have users type in a location and hit submit then go to a landing page with a Mapbox map and have it center or zoom to that location. I tried passing the address from local storage with a variable - get local storage item and setting that to the map center - no luck. Then setting that as the center in the new Mapbox map. I'd also be okay with using the flyto method from Mapbox to flyto the address location. I'm not sure if that would mess up the geocoder though. Here's my code:
What I have tried:
First page:
<html>
<form target="_blank" id="form1">
<input name="address" type="text" id="address" placeholder="Location" style="border-radius: 5px;"/>
<input onclick="window.location.href = 'mymapboxpage';" type="Submit" value="GO" style="border-radius: 5px;"/>
</form>
</div>
<script type="text/javascript">
document.getElementById('form1')
.addEventListener('submit', function (event) {
event.preventDefault();
localStorage.setItem('address', document.getElementById('address').value);
});
</script>
</html>
Landing page with Mapbox map:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; height:500px;}
#map { position:absolute; top:0; bottom:0; width:91%; height:500px;}
img {
height: 100px;
width: 120px;
}
.mapboxgl-ctrl-compass {
display: none !important;
}
</style>
</head>
<body>
<div id='map'></div>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<script>
mapboxgl.accessToken = 'mycode12345';
var address = localStorage.getItem('address'); //local storage item from previous page
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: address, //How would I pass it to the map center?
zoom: 3
});
map.on('load', function() {
map.addSource("Properties", {
type: "geojson",
data: "mydataurl",
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
map.addLayer({
id: "clusters",
type: "circle",
source: "Properties",
filter: ["has", "point_count"],
paint: {
"circle-color": [
"step",
["get", "point_count"],
"#ffffff",
100,
"#ffffff",
750,
"#ffffff"
],
"circle-radius": [
"step",
["get", "point_count"],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "Properties",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
map.addLayer({
id: "unclustered-point",
type: "circle",
source: "Properties",
filter: ["!", ["has", "point_count"]],
paint: {
"circle-color": "#ffffff",
"circle-radius": 8,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff"
}
});
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['unclustered-point'] // replace this with the name of the layer
});
if (!features.length) {
return;
}
var feature = features[0];
var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('myhtml')
.setLngLat(feature.geometry.coordinates)
.addTo(map);
});
});
map.on('mouseenter', 'clusters', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'clusters', function () {
map.getCanvas().style.cursor = '';
});
map.addControl(new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
placeholder: "Location",
animate: false,
zoom: 7.2
}), 'top-left');
map.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
</script>
</body>
</html>
any ideas?
Submit an article or tip