Mapbox GL JS: Some coordinates are not rendered - mapbox

I'm processing a multi-polygon geojson, but some polygons are not rendered with mapbox-gl-js, generating some gaps. The use of mapbox-js features renders correctly.
This problem only occurs with the mapbox-gl-js API.
This problem also occurs in Mapbox Studio when rederizing a tileset in a style even though the polygon exists in the dataset.
That's the link to the geojson:
geojson
This is the code snippet where I add the layer, with mapbox-gl-js:
map.addSource( < id > , {
type: 'vector',
url: < url >
});
map.addLayer({
"id": < id > ,
"type": "fill",
"source": < id > ,
"source-layer": < id > ,
"layout": {},
"paint": {
"fill-color": ["interpolate", ["linear"],
["get", "title"], 0.00, "red", 0.30, "#8aac75", 0.60, "#00e6e6", 0.90, "#00c0cc", 1.20, "#00a5cc", 1.50, "#007fcc", 1.80, "#000066", 2.10, "#0018cc", 2.40, "#0000ba", 2.70, "#000099", 3.00, "#000076", 3.30, "#000066", 3.60, "purple"
]
}
}, < layerId > );
This is the code snippet where I add the layer, with mapbox-js:
var featureLayer = L.mapbox.featureLayer().addTo(tmap);
featureLayer.loadURL('/geojson');
Would anyone know what may be generating this error?

Related

Issue when using ticks option on h-axis: google charts

I am using google chart's combo stacked bar. I want to display explicit values for h-axis, so I used ticks option. But, after using this option, my graph is displaying all bar values at once along the h-axis. But, I want to limit the bars to let's say 5 at a time and display the rest dynamically by sliding the charRangeFilter. The bars are almost appearing as straight lines when I use ticks option as shown in the image. Could some help me in resolving this issue? Any help is highly appreciated
Below is the code for the chart options
let hTicks = new Array<Date>(); // I already populated this array with Dates
let chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chartRangeFilter_chart_div',
'options': { .
// Use the same chart area width as the control for . axis alignment.
'width': '100%',
'height': '100%',
'hAxis': { 'title': 'DATES', 'gridlines': { 'color': 'transparent' }, 'ticks': hTicks, 'slantedText': true, 'slantedTextAngle': hTicks.length <= 10 ? 45 : 90 },
'legend': 'none',
'vAxis': { 'title': 'CABINS', 'viewWindow': { 'min': 0, 'max': (Number(cabinTotal) * 1.5) } },
'seriesType': 'bars',
'chartArea': { 'height': '50%', 'width': '85%' },
'bar': { 'groupWidth': '15%' },
'series': { 4: { 'type': 'line' } },
'isStacked': true,
'colors': ['#95d631', '#d7d7d7', '#f44336', '#00bcd4', '#ffc107']
}
Below are the charts
Chart with Tick option Chart Without Tick option
Solved by updating the ticks dynamically as the user slides the chartFilter

MapBox GL custom markers with symbol layer

I am trying to cluster custom markers in MapBox GL JS but I cannot figure out how to get a custom marker image from a url into the symbol layer? It either does not work or no markers show up at all. How is it done? I need to know how to use a custom image from a url with the symbol layer. Thank you very much.
map.addSource('parcelpoints', {
type: 'geojson',
data: geojson,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'parcelpoints',
filter: ['has', 'point_count'],
paint: {
// Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
// with three steps to implement three types of circles:
// * Blue, 20px circles when point count is less than 100
// * Yellow, 30px circles when point count is between 100 and 750
// * Pink, 40px circles when point count is greater than or equal to 750
'circle-color': [
'step',
['get', 'point_count'],
'#51bbd6',
100,
'#f1f075',
750,
'#f28cb1'
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
100,
30,
750,
40
]
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'parcelpoints',
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: 'symbol',
source: 'parcelpoints',
filter: ['!has', 'point_count'],
'layout': {
'visibility': 'visible',
'icon-image': { url: "marker.svg" }
}
});
First you need to:
load the external image with a specific ID, via map.loadImage().
add the image with a specific ID, via map.addImage(https://docs.mapbox.com/mapbox-gl-js/api/map/#map#loadimage).
There is a worked example here: https://www.mapbox.com/mapbox-gl-js/example/add-image/
// If the style's sprite does not already contain an image with ID 'kitty',
// add the image 'cat-icon.png' to the style's sprite with the ID 'kitty'.
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', (error, image) => {
if (error) throw error;
if (!map.hasImage('kitty')) map.addImage('kitty', image);
});
To include your loaded image in a symbol layer will look something like:
map.addLayer({
'id': 'clusters',
'type': 'circle',
'source': 'parcelpoints',
'filter': ['has', 'point_count'],
'icon-image': 'kitty',
...
There is no support for directly loading symbol images from URLs.

Creating multi line graphs using Google Charts API

I am attempting to draw multiple lines on a line graph using google charts, using JSON data coming from an API. I am able to draw a single line using the point data from the API, however, am unsure of the data format for multiple lines.
This is my client side code that uses google charts
var express = require('express');
var router = express.Router();
var request = require('request');
router.get('/', function(req, res){
res.send(JSON.stringify({
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":2,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}))
console.log('done with the sample api 1')
req.flash('success_msg', 'You successfully retrieved all goals');
console.log('done with the sample api 2')
});
module.exports = router;
The chart I observe is as follows
However, I am attempting to generate an image that looks like this
Would somebody be able to help me with the format of JSON data that would generate an image like so, with multiple lines.
Also, is there a way to specify that I'd like to see certain lines dotted and some other solid, in a multi line graph, as below.
PS : I am aware that you could hardcode points as follows, to generate multi lines. However, I'd rather it come from a json object as I show above, so I can replace this with a REST API endpoint that emits a JSON object.
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
EDIT : Based on #WhiteHat's response below, I have tried to create a chart with 4 lines, two of which are dotted, and two solid. Each of these line would have five points in the chart, for Week 17, Week 18, Week 19, Week 20 and Week 21. However, I see that only two lines get drawn.
This is my json input below
res.send({
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Solid-Series-1","pattern":"","type":"number"},
{"id":"","label":"Solid-Series-2","pattern":"","type":"number"},
{"id":"","label":"Dotted-Series-1","pattern":"","type":"number"},
{"id":"","role":"certainty","type":"boolean"},
{"id":"","label":"Dotted-Series-2","pattern":"","type":"number"},
{"id":"","role":"certainty","type":"boolean"}
],
"rows": [
{"c":[{"v":"Week 17","f":null},{"v":6,"f":null},{"v":5,"f":null},{"v":4,"f":null},{"v":3,"f":null},{"v":false}]},
{"c":[{"v":"Week 18","f":null},{"v":12,"f":null},{"v":11,"f":null},{"v":8,"f":null},{"v":7,"f":null},{"v":false}]},
{"c":[{"v":"Week 19","f":null},{"v":18,"f":null},{"v":15,"f":null},{"v":12,"f":null},{"v":12,"f":null},{"v":false}]},
{"c":[{"v":"Week 20","f":null},{"v":24,"f":null},{"v":20,"f":null},{"v":16,"f":null},{"v":14,"f":null},{"v":false}]}
]
})
EDIT for adding color
This is my attempt at specifying color in the JSON input for the chart. However, I am unable to get the color of choice. Kindly advise on how I can specify the color to add.
res.send({
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Series 1 solid","pattern":"","type":"number"},
{"id":"","label":"Series 2 solid","pattern":"","type":"number"},
{"id":"","label":"Series 1 dotted","pattern":"","type":"number"},
{"id":"","role":"certainty","type":"boolean"},
{"id":"","label":"Series 2 dotted","pattern":"","type":"number"},
{"id":"","role":"certainty","type":"boolean"},
{"id":"","role":"style"}
],
"rows": [
{"c":[{"v":"Week 17"},{"v":6},{"v":5},{"v":4},{"v":false},{"v":3},{"v":false},{"color":"red"}]},
{"c":[{"v":"Week 18"},{"v":12},{"v":11},{"v":8},{"v":false},{"v":7},{"v":false},{"color":"red"}]},
{"c":[{"v":"Week 19"},{"v":18},{"v":15},{"v":12},{"v":false},{"v":12},{"v":false},{"color":"red"}]},
{"c":[{"v":"Week 20"},{"v":24},{"v":20},{"v":16},{"v":false},{"v":14},{"v":false},{"color":"red"}]}
]
})
to add multiple lines, add multiple columns to the data table
the data table should have one column for the x-axis,
each additional column will be for the y-axis
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"}, // x-axis
{"id":"","label":"Slices 1","pattern":"","type":"number"}, // y-axis - series 0 - line 1
{"id":"","label":"Slices 2","pattern":"","type":"number"}, // y-axis - series 1 - line 2
{"id":"","label":"Slices 3","pattern":"","type":"number"}, // y-axis - series 2 - line 3
],
"rows": [
{"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null}]}
]
}
you can also add columns for roles, such as style or certainty
the role will be applied to the series column it follows
the certainty role will change lines to dotted when the role value is false,
in the following example, the third line will be dotted...
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"}, // x-axis
{"id":"","label":"Slices","pattern":"","type":"number"}, // y-axis - series 0 - line 1
{"id":"","label":"Slices","pattern":"","type":"number"}, // y-axis - series 1 - line 2
{"id":"","label":"Slices","pattern":"","type":"number"}, // y-axis - series 2 - line 3
{"id":"","role":"certainty","type":"boolean"}, // certainty role - false = dotted
],
"rows": [
{"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null},{"v":false}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
{"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]}
]
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"}, // x-axis
{"id":"","label":"Slices","pattern":"","type":"number"}, // y-axis - series 0 - line 1
{"id":"","label":"Slices","pattern":"","type":"number"}, // y-axis - series 1 - line 2
{"id":"","label":"Slices","pattern":"","type":"number"}, // y-axis - series 2 - line 3
{"id":"","role":"certainty","type":"boolean"}, // certainty role - false = dotted
],
"rows": [
{"c":[{"v":"Mushroooooms","f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":5,"f":null},{"v":false}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
{"c":[{"v":"Olives","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":false}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null},{"v":3,"f":null},{"v":4,"f":null},{"v":false}]}
]
});
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
to add colors, use the colors configuration option...
colors: ['cyan', 'magenta', 'lime', 'yellow']
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
"cols": [
{"id":"","label":"x","pattern":"","type":"string"}, // x-axis
{"id":"","label":"y0","pattern":"","type":"number"}, // y-axis - series 0 - line 1
{"id":"","label":"y1","pattern":"","type":"number"}, // y-axis - series 1 - line 2
{"id":"","label":"y2","pattern":"","type":"number"}, // y-axis - series 2 - line 3
{"id":"","role":"certainty","type":"boolean"}, // certainty role - false = dotted
{"id":"","label":"y3","pattern":"","type":"number"}, // y-axis - series 3 - line 4
{"id":"","role":"certainty","type":"boolean"}, // certainty role - false = dotted
],
"rows": [
{"c":[{"v":"A"}, {"v":3}, {"v":4}, {"v":5},{"v":false}, {"v":6},{"v":false}]},
{"c":[{"v":"B"}, {"v":4}, {"v":5}, {"v":6},{"v":false}, {"v":7},{"v":false}]},
{"c":[{"v":"C"}, {"v":3}, {"v":4}, {"v":5},{"v":false}, {"v":6},{"v":false}]}
]
});
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, {
colors: ['cyan', 'magenta', 'lime', 'yellow']
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

How to get set up a GeoJson map with OSM?

My website currently uses mapbox as the base map: www.livehazards.com
The amount of views for the mapbox are for some reason, nearly 10x as high as Google Adsense views, meaning if I were to ever get 10,000+ visitors a day it would be financially unsustainable ($50 a day).
Here are some questions:
I've heard OSM is free to use, there are no charges for x amount of views - is this correct?
I know the base map would be different but would I be able to import GeoJson Earthquake data and style the data (Circle border, circle animation) similarly as I have with mapbox?
How can I get started with embedding an interactive OSM map on my website and how I would go about importing GeoJson Earthquake data within an OSM map?
Code:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18,
}).addTo(mymap);
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
};
L.geoJSON(geojsonFeature).addTo(mymap);
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<style>
body,html,#mapid { height: 100%; width: 100%; }
</style>
</head>
<body>
<div id="mapid"></div>
</body>
</html>
First, to clarify a bit of terminology, OpenStreetMap (OSM) is the database. There are many different providers of raster or vector tile services derived from OSM, and openstreetmap.org is itself one - with "reasonable use" guidelines. You don't "import" data "within" an OSM map, but you can "overlay" data "over" tiles provided by openstreetmap.org or anywhere else.
So, how do you overlay GeoJSON data over a raster tileset? Easy, use Leaflet and follow the quick start tutorial and the GeoJSON tutorial. The crucial parts:
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18,
}).addTo(mymap);
var geojsonFeature = {
"type": "Feature",
"properties": {
"name": "Coors Field",
"amenity": "Baseball Stadium",
"popupContent": "This is where the Rockies play!"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
};
L.geoJSON(geojsonFeature).addTo(map);

Not able to implement AmCharts Gauge type in SAPUI5

I am trying to add a Gauge chart in my UI5 app. I am successfully able to implement the chart with "Series" type. So I am able to load the libs from manifest.json file. But When I am trying to implement the gauge chart. I am getting below mentioned error.
amcharts.js? eval:174 Uncaught TypeError: d.AmAngularGauge is not a constructor
I am using this code :
var gaugeChart = AmCharts.makeChart( "chartdiv", {
"type": "gauge",
"theme": "light",
"axes": [ {
"axisThickness": 1,
"axisAlpha": 0.2,
"tickAlpha": 0.2,
"valueInterval": 20,
"bands": [ {
"color": "#84b761",
"endValue": 90,
"startValue": 0
}, {
"color": "#fdd400",
"endValue": 130,
"startValue": 90
}, {
"color": "#cc4748",
"endValue": 220,
"innerRadius": "95%",
"startValue": 130
} ],
"bottomText": "0 km/h",
"bottomTextYOffset": -20,
"endValue": 220
} ],
"arrows": [ {} ],
"export": {
"enabled": true
}
} );
In my View , I am rendering the map in VBox.
Regards,
MS
You're not implementing a series chart in your code, you're implementing a gauge chart. The error is telling you that you didn't include the gauge.js file. amcharts.js isn't enough as it's the base library and serial.js does not contain the gauge chart classes. Make sure the following is included for your gauge chart:
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/gauge.js"></script>
<!-- if you need other charts like pie, radar, and series include those js files -->
<!-- plugins such as export and dataloader also come after the chart includes -->
You can see what chart libraries need to be included for each type by looking at AmCharts' demos page.