I need to load a GeoJson Feature Collection layer (points) in a MapBox GL JS Map.
I've tried to use this HTML / Javascript code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></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.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<PUT YOUR MAPBOX KEY HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [7.828,44.836],
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
theCoords = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "NAME": "<b>Entrata Castello del Valentino<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Entrata_Castello_del_Valentino.JPG\" target=\"_blank\">Immagine 360 ø<\/a>", "Longitudine": 7.6855111, "Latitudine": 45.0546417, "Altitudine": 288.39, "Direzione": 202.5, "Data": "2017:06:06", "Ora": "17:57" }, "geometry": { "type": "Point", "coordinates": [ 7.6855111, 45.0546417 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4303883, "Latitudine": 44.8816653, "Altitudine": 0.0, "Direzione": 292.5, "Data": "2017:06:16", "Ora": "19:27" }, "geometry": { "type": "Point", "coordinates": [ 7.4303883, 44.8816653 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Regione Maineri<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1A.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/1.Via_Regione_Maineri.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4328394, "Latitudine": 44.8790463, "Altitudine": 336.29, "Direzione": 180.0, "Data": "2017:06:16", "Ora": "20:23" }, "geometry": { "type": "Point", "coordinates": [ 7.4328394, 44.8790463 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Frazione di Buriasco<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10B.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Frazione_di_Buriasco.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4236184, "Latitudine": 44.8790577, "Altitudine": 0.0, "Direzione": 270.0, "Data": "2017:06:16", "Ora": "19:30" }, "geometry": { "type": "Point", "coordinates": [ 7.4236184, 44.8790577 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Via Rivasecca<\/b>", "INFO": "Buriasco (TO)", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10C.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Via_Rivasecca.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.4266083, "Latitudine": 44.88725, "Altitudine": 348.79, "Direzione": 0.0, "Data": "2017:06:16", "Ora": "20:16" }, "geometry": { "type": "Point", "coordinates": [ 7.4266083, 44.88725 ] } },
{ "type": "Feature", "properties": { "NAME": "<b>Viale Mattioli<\/b>", "INFO": "Torino", "IMG_SRC": "<img src=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10T.JPG\">", "IMAGE,C": "<a href=\"http:\/\/ftp.webgisprova.altervista.org\/Database\/10.Viale_Mattioli.JPG\" target=\"_blank\">Immagine 360›<\/a>", "Longitudine": 7.687725, "Latitudine": 45.0566306, "Altitudine": 282.6, "Direzione": 292.5, "Data": "2017:06:06", "Ora": "17:44" }, "geometry": { "type": "Point", "coordinates": [ 7.687725, 45.0566306 ] } }
]
};
map.on('load', function () {
map.addSource("route", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"properties": {},
"geometry": theCoords
}
});
map.addLayer({
"id": "route",
"type": "symbol",
"source": "route",
"paint": {
"circle-radius": 10,
"circle-color": "#ff0000"
}
});
});
</script>
</body>
</html>
No errors come out in my browser console but I can't see my layer on the map.
I've checked my GeoJSON using http://geojsonlint.com/ and all seems right (and using this tool my GeoJson is drawn on the tool map ....).
I think that could be something about the GeoJSON structure but I don't know hao to resolve
I've solved!
Here you're the right code ...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></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.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<PUT YOUR MAPBOX KEY HERE>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [7.828,44.836],
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function () {
map.addSource("route", {
"type": "geojson",
"data": "./data/test.geoJSON"
});
map.addLayer({
"id": "route",
"type": "circle",
"source": "route",
"paint": {
"circle-radius": 5,
"circle-color": "#ff0000"
}
});
});
</script>
</body>
</html>
I've put my geoJSON in a file and then I used "data": "./data/test.geoJSON" to upload it .....
Related
I have the following JS code to create a 1 mile buffer in Openlayers using JSTS. However, I'd like to add 2 or 3 buffers but change the colour from the default for easier viewing.
So far, I've tried this as this styling as changed the fill/stroke of my points before
var source = new ol.source.Vector();
fetch('http://18.207.139.64:8080/geoserver/egm715/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=egm715:Mid_Ulster1&' +
'outputFormat=application/json&srsname=EPSG:3857').then(function(response) {
return response.json();
}).then(function(json) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
var parser = new jsts.io.OL3Parser();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres
var buffered = jstsGeom.buffer(1609);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
});
var buffer1 = new ol.layer.Vector({
source: source,
title: 'Mid Ulster Buffer - 1 mile',
visible: false,
style: new ol.style.Style(
{
image: new ol.style.Circle(
{
stroke: new ol.style.Stroke(
{
color: [0, 102, 77],
width: 2
}
),
fill: new ol.style.Fill(
{
color: [230, 255, 255, 0.6]
}
)
}
)
}
)
});
However, the default colour remains - is there any way I can change it?
As #Mike indicated in his comment: "The image option in ol.style.Style is used to style point features with an icon or regular shapes such as a circle. Your buffered geometry is a polygon, and is styled by stroke and fill options of ol.style.Style"
Change the style:
style: new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: [0, 102, 77],
width: 2
}),
fill: new ol.style.Fill({
color: [230, 255, 255, 0.6]
})
})
})
To remove the image: new ol.styld.Circle, something like:
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
code snippet
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTS Integration</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script src="https://unpkg.com/jsts#2.3.0/dist/jsts.min.js"></script>
<style>
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var json = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "FoodOutlets-MidUlst1.1",
"geometry": {
"type": "Point",
"coordinates": [-760868.77651775, 7266893.59283424]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.2",
"geometry": {
"type": "Point",
"coordinates": [-745762.5639359, 7273034.00676835]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.3",
"geometry": {
"type": "Point",
"coordinates": [-746154.82706286, 7273335.72201827]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.4",
"geometry": {
"type": "Point",
"coordinates": [-744607.30629421, 7255093.16775183]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.5",
"geometry": {
"type": "Point",
"coordinates": [-745202.69041239, 7255413.35399374]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.6",
"geometry": {
"type": "Point",
"coordinates": [-753889.58828371, 7266121.43420011]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.7",
"geometry": {
"type": "Point",
"coordinates": [-753078.05077876, 7267405.03419487]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.8",
"geometry": {
"type": "Point",
"coordinates": [-797828.64640079, 7249092.54222032]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.9",
"geometry": {
"type": "Point",
"coordinates": [-753881.35356931, 7266025.39133859]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.10",
"geometry": {
"type": "Point",
"coordinates": [-742327.05477715, 7302434.75328766]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.11",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.12",
"geometry": {
"type": "Point",
"coordinates": [-742442.85453496, 7302225.99299248]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.13",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.14",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.15",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.16",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.17",
"geometry": {
"type": "Point",
"coordinates": [-743083.01564625, 7280176.20812626]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.18",
"geometry": {
"type": "Point",
"coordinates": [-750837.75665786, 7294119.26420537]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.19",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.20",
"geometry": {
"type": "Point",
"coordinates": [-750790.13706862, 7294411.61511293]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.21",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.22",
"geometry": {
"type": "Point",
"coordinates": [-729059.04788702, 7288230.5536544]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.23",
"geometry": {
"type": "Point",
"coordinates": [-771157.83824017, 7283468.51757007]
},
"geometry_name": "the_geom",
"properties": {}
}, ],
"totalFeatures": 140,
"numberMatched": 140,
"numberReturned": 140,
"timeStamp": "2021-03-02T05:15:46.157Z",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3857"
}
}
};
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {
featureProjection: 'EPSG:3857'
});
var source = new ol.source.Vector(); // VectorSource();
var parser = new jsts.io.OL3Parser();
parser.inject(
ol.geom.Point,
ol.geom.LineString,
ol.geom.LinearRing,
ol.geom.Polygon,
ol.geom.MultiPoint,
ol.geom.MultiLineString,
ol.geom.MultiPolygon
);
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres adjusted for the projection
var buffered = jstsGeom.buffer(1609 / ol.proj.getPointResolution('EPSG:3857', 1, ol.extent.getCenter(feature.getGeometry().getExtent())));
// create a buffer of 40 meters around each line
// var buffered = jstsGeom.buffer(1000);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
var rasterLayer = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([126.979293, 37.528787]),
zoom: 15,
}),
});
map.getView().fit(source.getExtent());
</script>
</body>
</html>
I started from this link:
ArcGIS Samples - GeoJSON Layer
I would like to show the Shake Intensity as per the link below:
Sample
Service
I have tried to implement it. Please have a look:
codepen
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the layers-geojson sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/index.html
-->
<title>GeoJSONLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView",
"esri/widgets/Legend"
], function(Map, GeoJSONLayer, MapView, Legend) {
// If GeoJSON files are not on the same domain as your website, a CORS enabled server
// or a proxy is required.
const url =
//"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime&minlatitude=33.387&minlongitude=-127.134&maxlatitude=40.457&maxlongitude=-115.994&minlatitude=33.387&minlongitude=-127.134&maxlatitude=40.457&maxlongitude=-115.994&producttype=shakemap";
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/query?where=1=1&geometry=-122.40,37.76&geometryType=esriGeometryPoint&inSR=4326&distance=100&units=esriSRUnit_StatuteMile&outFields=*&returnGeometry=true&geometryPrecision=4&outFields=*&f=pgeojson";
// Paste the url into a browser's address bar to download and view the attributes
// in the GeoJSON file. These attributes include:
// * mag - magnitude
// * type - earthquake or other event such as nuclear test
// * place - location of the event
// * time - the time of the event
// Use the Arcade Date() function to format time field into a human-readable format
const template = {
title: "Earthquake Info",
content: "Magnitude {mag} {type} hit {place} on {time}",
fieldInfos: [
{
fieldName: "time",
format: {
dateFormat: "short-date-short-time"
}
}
]
};
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [
{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "4px"
},
{
value: 8,
size: "40px"
}
]
}
]
};
const geojsonLayer = new GeoJSONLayer({
url: url,
title: "MMI",
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer: renderer //optional
});
const map = new Map({
basemap: "gray",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [-122, 37],
zoom: 6,
map: map
});
view.ui.add(
new Legend({
view: view
}),
"bottom-left"
);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
The url returns a Multipolygon feature:
Service Query Attempt
The map shows points no polygons.
Could you please help me?
The query is actually returning polygons, the problem you have is the wrong renderer. That is the reason you are seeing as points.
Here you have your example working, I use the renderer defined in the service you might want to custom it,
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>GeoJSONLayer - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/renderers/support/jsonUtils"
], function (Map, GeoJSONLayer, MapView, Legend, rendererJsonUtils) {
const url =
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/query?where=1=1&geometry=-122.40,37.76&geometryType=esriGeometryPoint&inSR=4326&distance=100&units=esriSRUnit_StatuteMile&outFields=*&returnGeometry=true&geometryPrecision=4&outFields=*&f=pgeojson";
const template = {
title: "Shake Intensity",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "grid_value",
label: "Grid Value"
},
{
fieldName: "mag",
label: "Magnitude"
},
{
fieldName: "eventTime",
label: "Event Time",
format: {
dateFormat: "short-date-short-time"
}
},
{
fieldName: "updated",
label: "Updated",
format: {
dateFormat: "short-date-short-time"
}
},
{
fieldName: "url",
label: "Url"
}
]
}
]
};
const rendererJSON = {
"field": "grid_value",
"classificationMethod": "esriClassifyManual",
"classBreakInfos": [
{
"classMaxValue": 1.9999,
"symbol": {
"color": [
0,
0,
0,
0
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "I (Not Felt)"
},
{
"classMaxValue": 3.9999,
"symbol": {
"color": [
0,
0,
0,
0
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "II - III (Weak)"
},
{
"classMaxValue": 4.9999,
"symbol": {
"color": [
140,
250,
230,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "IV (Light)"
},
{
"classMaxValue": 5.9999,
"symbol": {
"color": [
140,
250,
140,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "V (Moderate)"
},
{
"classMaxValue": 6.9999,
"symbol": {
"color": [
255,
220,
20,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "VI (Strong)"
},
{
"classMaxValue": 7.9999,
"symbol": {
"color": [
255,
180,
0,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "VII (Very Strong)"
},
{
"classMaxValue": 8.9999,
"symbol": {
"color": [
255,
120,
20,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "VIII (Severe) "
},
{
"classMaxValue": 9.9999,
"symbol": {
"color": [
255,
0,
0,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "IX (Violent)"
},
{
"classMaxValue": 12,
"symbol": {
"color": [
143,
0,
0,
255
],
"style": "esriSFSSolid",
"type": "esriSFS",
"outline": {
"color": [
0,
0,
0,
0
],
"width": 0.4,
"style": "esriSLSSolid",
"type": "esriSLS"
}
},
"description": "",
"label": "X+ (Extreme)"
}
],
"type": "classBreaks",
"minValue": 0
};
const renderer = rendererJsonUtils.fromJSON(rendererJSON);
const geojsonLayer = new GeoJSONLayer({
url: url,
title: "MMI",
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer
});
const map = new Map({
basemap: "gray",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [-122, 37],
zoom: 6,
map: map
});
view.ui.add(
new Legend({
view: view
}),
"bottom-left"
);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
One last thing, I am not quite sure why you querying and using GeoJSONLayer, remember that you can use FeatureLayer that actually support many query operations and you don't need to get the json data it does it for you.
I need to complete todos in user's page via MS Graph API. If todos are in a list, after replace operation for the todo the list becomes broken. Luckily, I found a hack to complete todo without breaking the list: Working with OneNote Page Content via the Graph API
Insert a completed copy of a target todo before it
Replace the target todo with empty block
If I send these 2 operations in one request - API returns 500.
Is it possible to fix it?
Details about page and requests:
Page layout (GET /me/onenote/pages/{{pageId}}/content?includeIDs=true)
<html lang="en-US">
<head>
<title>Nested list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2018-10-04T09:46:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{b883c993-0084-480b-9f15-3b0407435f29}{144}" style="position:absolute;left:96px;top:139px;width:624px">
<p id="p:{b883c993-0084-480b-9f15-3b0407435f29}{146}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Super task</p>
<p id="p:{b883c993-0084-480b-9f15-3b0407435f29}{153}" style="margin-top:0pt;margin-bottom:0pt">Point 1</p>
<p id="p:{b883c993-0084-480b-9f15-3b0407435f29}{155}" style="margin-top:0pt;margin-bottom:0pt">Point 2</p>
<p id="p:{b883c993-0084-480b-9f15-3b0407435f29}{149}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Mega task</p>
<p id="p:{b883c993-0084-480b-9f15-3b0407435f29}{151}" data-tag="to-do" style="margin-top:0pt;margin-bottom:0pt">Mega subtask</p>
</div>
</body>
</html>
Update request (PATCH /me/onenote/pages/{{pageId}}/content):
[
{
"action": "insert",
"position": "before",
"target": "p:{b883c993-0084-480b-9f15-3b0407435f29}{146}",
"content": "<p data-tag=\"to-do:completed\" style=\"margin-top:0pt;margin-bottom:0pt\">Super task</p>"
}, {
"action": "replace",
"target": "p:{b883c993-0084-480b-9f15-3b0407435f29}{146}",
"content": "<span></span>"
}
]
API response:
{
"error": {
"code": "19999",
"message": "Something failed, the API cannot share any more information at the time of the request.",
"innerError": {
"request-id": "d352cd80-b40d-4d55-b984-2bb5cae07f2b",
"date": "2018-10-04T04:24:25"
}
}
}
Is it possible to fix it?
Yes. By using the batch request.
A workaround for you, I still working on format the body data:
{
"requests": [
{
"id": "1",
"url": "/me/onenote/pages/{page-id}/content",
"method": "PATCH",
"body": {
"value": [
{
"action": "insert",
"position": "before",
"target": "p:{04b55584-a5f7-4ac2-b34d-474ebe346ce8}{69}",
"content": "<p data-tag=\"to-do:completed\" style=\"margin-top:0pt;margin-bottom:0pt\">Super task</p>"
}
]
},
"headers": {
"Content-Type": "application/json"
}
},
{
"id": "2",
"url": "/me/onenote/pages/{page-id}/content",
"method": "PATCH",
"body": {
"value": [
{
"action": "replace",
"target": "p:{04b55584-a5f7-4ac2-b34d-474ebe346ce8}{69}",
"content": "<span></span>"
}
]
},
"headers": {
"Content-Type": "application/json"
}
}
]
}
I am trying to hide Feature of a layer from jason where I define the feature by category. I tried Jonatas Walker method but my code is different not working http://jsfiddle.net/jonataswalker/z10de36z/ but my code is different so not working
Below is my json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Missing Person",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.45755, 51.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 1",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-1.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 3",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-2.12755, 53.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 7",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.1287, 53.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 9",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-3.12755, 50.907222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 8",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-3.12755, 51.907222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 18",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-4.12755, 51.907222]
}
}
]
}
Openlayer code
var styleFunction1 = function(feature) {
var styles = {
'Point': [
new ol.style.Style({
image: new ol.style.Icon({
src: feature.get('src'),
anchor: [0.5, 1]
})
})],
'LineString': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 5
})
})]
};
return styles[feature.getGeometry().getType()];
};
vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection : 'EPSG:4326',
format: new ol.format.GeoJSON(),
url: 'resources/multipoint.geojson'
}),
style: styleFunction1
});
map = new ol.Map({
target: target,
layers: [bingMapsRoad,myPetrolPlan,vector],
view: new ol.View({
center: ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857'),
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
zoom: 6
}),
controls: ol.control.defaults({ attribution: false }),
loadTilesWhileInteracting: true
});
To Hide I am trying something like
hideVectorLayer: function () {
var abc = ConnectWebMap;
var featureCount = vector.getSource().getFeatures();
var featureCat = feature.get('category');
console.log(featureCat);
featureCount.forEach(function(feature) {
if(feature){
if(featureCat == 'cat1'){
console.log('a');
}
}
});
}
You can remove from the VectorSource using removeFeature method
you can make another layer ( a temporary one ) where you copy the features from the desired category and display it while setting the visibility of your main layer to false:
var tmp=new ol.layer.vector({ source : new ol.source.Vector()});
hideVectorLayer: function () {
var abc = ConnectWebMap;
var featureCount = vector.getSource().getFeatures();
var featureCat = feature.get('category');
console.log(featureCat);
featureCount.forEach(function(feature) {
if(feature){
if(featureCat == 'cat1'){
tmp.getSource().getFeatures().push(feature);
}
}
});
tmp.setStyle(vector.getStyle()); // set the same style to the tmp layer
map.addLayer(tmp);// add it to the map
vector.setVisible(false); // set the vector layer visibility to false
}
Im trying to use the three.js online editor to do a normal mapping experiment. The editor is great as you can see below:
Without normal map:
With normal map:
My problem when exporting, the most important thing for me is the materials but is looks like the exporter is not exporting up materials settings like shaders or uniforms:
{
"metadata": {
"version": 4,
"type": "object",
"generator": "ObjectExporter"
},
"geometries": [
{
"type": "PlaneGeometry",
"width": 200,
"height": 200,
"widthSegments": 1,
"heightSegments": 12
}],
"materials": [
{
"type": "MeshPhongMaterial",
"color": 16580351,
"ambient": 16777215,
"emissive": 0,
"specular": 13027014,
"shininess": 60,
"opacity": 1,
"transparent": false,
"wireframe": false
}],
"object": {
"type": "Scene",
"children": [
{
"name": "Plane 8",
"type": "Mesh",
"position": [-13.67,102.97,28.83],
"rotation": [-0.18,-0.22,0],
"scale": [1,1,1],
"geometry": 0,
"material": 0
},
{
"name": "AmbientLight 10",
"type": "AmbientLight",
"color": 2236962
},
{
"name": "AmbientLight 11",
"type": "AmbientLight",
"color": 2236962
},
{
"name": "DirectionalLight 12",
"type": "DirectionalLight",
"color": 16777215,
"intensity": 1,
"position": [200,200,200]
},
{
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
},
{
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
},
{
"name": "DirectionalLight 12 Target",
"type": "Object3D",
"position": [0,0,0],
"rotation": [0,0,0],
"scale": [1,1,1]
}]
}
}
I understand that the editor is work in progress so this is probably not implemented yet, but do you know if there is a way to see the generated code from the editor when building the scene? I can can see the code it should be enough for me.
Thanks :)
Sorry guys I figured how get the normal map to work, I still dont know how to see the code from the editor but I will close the question anyway... Thanks to those that took the time to read it.
//wall
var textures = {
lion: THREE.ImageUtils.loadTexture('../media/lion.png'),
lionbumpnormal: THREE.ImageUtils.loadTexture('../media/lion-bumpnormal.png')
};
// common material parameters
var ambient = 0, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23;
var material = new THREE.MeshPhongMaterial( {
map: textures.lion,
normalMap: textures.lionbumpnormal,
color: 16580351,
ambient: 16777215,
emissive: 0,
specular: 13027014,
shininess: 60,
opacity: 1,
transparent: false,
wireframe: false
} );
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var wall = new THREE.Mesh(
planeGeometry,
material
);
Not sure if this is what you meant, but I was trying to load a simple scene I setup in the editor. Was able to do it using THREE.ObjectLoader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="../three.js/build/three.js"></script>
<script>
(function() {
var Game = function() {
}
Game.prototype.init = function() {
var loader = new THREE.ObjectLoader();
loader.load('data.json', (function(data) {
this.scene = data;
this.load();
}).bind(this));
}
Game.prototype.draw = function() {
this.renderer.render(this.scene, this.camera);
}
Game.prototype.load = function() {
var container = document.createElement('div');
document.body.appendChild(container);
this.camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
this.camera.position.z = 500;
this.camera.position.x = 500;
this.camera.position.y = 100;
this.camera.lookAt(new THREE.Vector3(0,0,0));
this.scene.add(this.camera);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild(this.renderer.domElement);
this.update();
};
Game.prototype.update = function() {
requestAnimationFrame(this.update.bind(this));
this.draw();
}
window.onload = function() {
var g = new Game();
g.init();
}
}).call(this);
</script>
</head>
<body>
</body>
</html>