Is there a way that I can connect a polygon format (JS) to a map (HTML) - mapbox

I'm trying to put a polygon format from Mapbox into the Mapbox map itself (via a Github copy for a project), and I haven't yielded any results.
I did the formatting, using different files, combining them into 1 via a combiner, etc.
Polygon (JS):
map.on('load', () => {
// Add a data source containing GeoJSON data.
map.addSource('maine', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
// These coordinates outline Maine.
'coordinates': [
[
[-125.15625000000001, 48.04870994288686],
[-124.71679687499999, 43.32517767999296],
[-125.15625000000001, 39.639537564366684],
[-121.11328124999999, 34.59704151614417],
[-121.11328124999999, 34.59704151614417],
[-117.158203125, 32.47269502206151],
[-105.732421875, 31.27855085894653],
[-97.20703125, 25.64152637306577],
[-84.287109375, 29.84064389983441],
[-80.947265625, 24.84656534821976],
[-74.970703125, 35.38904996691167],
[-66.62109375, 45.02695045318546],
[-68.73046875, 47.39834920035926],
[-71.455078125, 44.84029065139799],
[-82.880859375, 41.96765920367816],
[-88.154296875, 48.22467264956519],
[-109.072265625, 49.03786794532644],
[-123.134765625, 49.15296965617042],
[-125.15625000000001, 48.04870994288686],
]
]
}
}
});
// Add a new layer to visualize the polygon.
map.addLayer({
'id': ' ',
'type': 'fill',
'source': 'maine', // reference the data source
'layout': {},
'paint': {
'fill-color': '#0080ff', // blue color fill
'fill-opacity': 0.2
}
});
// Add a black outline around the polygon.
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {},
'paint': {
'line-color': '#000',
'line-width': 0
}
});
});
Said remaining copies of code are located in https://github.com/AliCodes-Beep/Google-Map-Clone

Related

MapBoxGL - why does it flag my source as invalid geoJSON

I am trying to dynamically add polygons to a MapboxGL map by passing the coordinates into a funciton. Should be simple enough, but I'm having a tough time with it. Why does this work...
map.addSource('zip_code', {
'type': 'geojson',
'data':
{
'type':'Feature',
'geometry':
{
'type': 'Polygon',
'coordinates': [[[-94.853056,38.956395],[-94.851164,38.956397],[-94.849007,38.955712],[-94.849826,38.954964],[-94.851949,38.954824],[-94.852459,38.953593],[-94.85233,38.94554],[-94.851999,38.944495],[-94.848298,38.941805],[-94.844247,38.941655],[-94.843825,38.942708],[-94.843982,38.950197],[-94.844067,38.959505],[-94.844526,38.960942],[-94.8436,38.96136],[-94.842219,38.963486],[-94.843687,38.963468],[-94.844052,38.964628],[-94.844389,38.972774],[-94.844171,38.974898],[-94.838256,38.974272],[-94.838265,38.976055],[-94.836484,38.976063],[-94.836478,38.978123],[-94.844112,38.978049],[-94.844088,38.981676],[-94.825422,38.981609],[-94.821139,38.981585],[-94.821069,38.985312],[-94.816327,38.985269],[-94.80934,38.985137],[-94.810772,38.981613],[-94.809256,38.979913],[-94.807271,38.975244],[-94.804835,38.975174],[-94.803266,38.976119],[-94.801335,38.974898],[-94.7977,38.975117],[-94.797298,38.974488],[-94.797313,38.970997],[-94.797375,38.955914],[-94.795936,38.955915],[-94.797378,38.954629],[-94.797477,38.94162],[-94.807256,38.941881],[-94.812495,38.942072],[-94.816146,38.942039],[-94.830418,38.941388],[-94.852979,38.941395],[-94.853353,38.956395],[-94.853056,38.956395]]]
}
}
});
...but this doesn't with an error of: "Input data given to 'xyz' is not a valid GeoJSON object."
var data = "[[[-94.853056,38.956395],[-94.851164,38.956397],[-94.849007,38.955712],[-94.849826,38.954964],[-94.851949,38.954824],[-94.852459,38.953593],[-94.85233,38.94554],[-94.851999,38.944495],[-94.848298,38.941805],[-94.844247,38.941655],[-94.843825,38.942708],[-94.843982,38.950197],[-94.844067,38.959505],[-94.844526,38.960942],[-94.8436,38.96136],[-94.842219,38.963486],[-94.843687,38.963468],[-94.844052,38.964628],[-94.844389,38.972774],[-94.844171,38.974898],[-94.838256,38.974272],[-94.838265,38.976055],[-94.836484,38.976063],[-94.836478,38.978123],[-94.844112,38.978049],[-94.844088,38.981676],[-94.825422,38.981609],[-94.821139,38.981585],[-94.821069,38.985312],[-94.816327,38.985269],[-94.80934,38.985137],[-94.810772,38.981613],[-94.809256,38.979913],[-94.807271,38.975244],[-94.804835,38.975174],[-94.803266,38.976119],[-94.801335,38.974898],[-94.7977,38.975117],[-94.797298,38.974488],[-94.797313,38.970997],[-94.797375,38.955914],[-94.795936,38.955915],[-94.797378,38.954629],[-94.797477,38.94162],[-94.807256,38.941881],[-94.812495,38.942072],[-94.816146,38.942039],[-94.830418,38.941388],[-94.852979,38.941395],[-94.853353,38.956395],[-94.853056,38.956395]]]";
map.addSource('zip_code', {
'type': 'geojson',
'data':
{
'type':'Feature',
'geometry':
{
'type': 'Polygon',
'coordinates': data
}
}
});
I have tried about everything to dynamically set that source for a variable with no luck.

Mapbox GeoJSON or Plain Lat and Long for Database Storage

I am new to working with maps. My issue is I don't understand if I need to store data in my database as geoJSON or just store the coordinates and create custom markers with popups which is what I need to do. My database is MongoDB, although it shouldn't really matter for this. In geoJSON Mapbox parses the data like so:
const geojson = {
'type': 'FeatureCollection',
'features': [
{
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
-77.03238901390978, 38.913188059745586
]
},
'properties': {
'title': 'Mapbox DC'
}
},
{
// feature for Mapbox SF
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox SF'
}
}
]
}
The example data
map.current.addSource('points', {
'type': 'geojson',
'data': geojson
});
The data being parsed (part of the code, it's in load image for the custom markers thing I was talking about it.)

Routing between two points in Mapbox

I am using MapBox to create a route between two points. I have LatLng of two points already and have successfully added Markers at source and destination points.
The problem is how to map or connect between these two points using curved lines (route) when the user clicks on the source point?
e.g flights routes map

If you want to draw arcs lines that connect 2 points on the earth surface, you do not have to worry about the curvature, as the shortest line between 2 points on a sphere is curved.
The below should do the trick and draw a curved line between San Francisco and Washington DC on your Mapbox GL JS map:
// San Francisco
var origin = [-122.414, 37.776];
// Washington DC
var destination = [-77.032, 38.913];
// A simple line from origin to destination.
var route = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [origin, destination]
}
}
]
};
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('route', {
'type': 'geojson',
'data': route
});
map.addLayer({
'id': 'route',
'source': 'route',
'type': 'line',
'paint': {
'line-width': 2,
'line-color': '#007cbf'
}
});
});

mapbox GL JS - pass source data to custom layer

I've added some quads with custom shaders to map (Examples are here and here). I need to pass data from my source to shader. Tutorials says that I can just pass 'source': 'point', to layer class constructor. Is it possible to pass source data to custom layer?
Here is source example:
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});

Mapbox - How can I show buildings the way foursquare shows them?

Here's what I mean.
Take a look at the following screenshot from foursquare:
However, using street view, here's what that same area looks like in my map at the same zoom level:
As you can see, the buildings don't show up. How can I make these buildings show up?

If you use mapbox gl-js API than I might know the solution.
I think you need to add another layer, I did it like this(add the code below to your client-side javascritpt file):
`map.on('load', function () {
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 14,
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': {
'type': 'identity',
'property': 'height'
},
'fill-extrusion-base': {
'type': 'identity',
'property': 'min_height'
},
'fill-extrusion-opacity': .6
}
});
});`