We Keep Coding

How to add a GeoJSONLayer to a map from json file ArcGIS API for JavaScript?

I created a point layer in ArcMap, then, using the Features to JSON tool, converted these points into a JSON file and ticked GeoJSON, trying to add it to the map:
let layer = new GeoJSONLayer({
url: "data/points.json"
});
let map = new Map({
basemap: "dark-gray"
});
map.add(layer);
let mapview = new MapView({
container: "map",
map: map
});
But nothing appears on the map, I tried to change the format to .geojson, the same way, if I change the url to a link from the documentation, then all the rules, dots appear, what am I doing wrong?
Maybe the problem is in the json file?
https://drive.google.com/open?id=1YxKfhiQMD82W2EI1llsmQaVD3kWgnWP-

Can't get relative URL's working in OpenLayers3

After three days of vainly looking everywhere (learning books OpenLayers3, Javascript and Internet) for a solution I put my question here.
The problem is that I can't get relative url's working in OpenLayers3. Here I give an example:
I have a OpenLayersscript in a map/directory called sandbox.
The relative url's in the HTML part of this script are working, including the relative url in javascript to ol.js.
The problem is that the relative url in the Javascript part of the script don't work. Only when the targetfile (nutsv9_lea.geojson) is in a map/directory underlying the map/directory containing the OpenLayersscript itself, it works, but only in Firefox and not in Google Chrome and InternetExplorer.
The map sandbox (containing this OpenLayersfile) is located in the maps/directories structure: C:/ol3_samples/sandbox
The targetfile (nutsv9_lea.geojson) is located in the maps/directories structure: C:/ol3_samples/assets/data/nutsv9_lea.geojson
The relative url I use is: url: '../assets/data/nutsv9_lea.geojson'
The only working solution (as mentioned above only in Firefox) is the relative url targeting to a underlying map/directory called 'data' containing the target file: url: 'data/nutsv9_lea.geojson' in the map/directory structure: C:/ol3_samples/sandbox/data/nutsv9_lea.geojson
What am I doing wrong or am I overlooking?
<script>
var vectorSource = new ol.source.GeoJSON({
projection: 'EPSG:3857',
//not working relative url:
// url: '../assets/data/nutsv9_lea.geojson'
//working url (with the targetfile in a directory below the directory containing this script) but only working in Firefox and not working in Chrome and InternetExplorer
url: 'data/nutsv9_lea.geojson'
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var center = ol.proj.transform([5.231819, 52.091852], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 5
});
var map = new ol.Map({
target: 'map',
layers: [vectorLayer],
view: view
});
</script>

I'm one of the authors of the book where this extract comes from. You need to run a local server (where files are served via http:// and not file://).
You just need to look at p 117.
It tells you can run (as long as you have Python)
python -m SimpleHTTPServer
or in case you got the samples from Packt website, run (if you have node)
node index.js
For both NodeJS and Python, you have install instructions (pages 417 & 418),
For Python and people who do not own the book, go to http://docs.python-guide.org/en/latest/starting/installation/

Openlayers: Vector Layer from Local Variable

I am using OpenLayers to make a map from json data. I have to load it once already (with PHP) to check timestamps and verify information. At that point, I'd rather output a javascript variable and just have OL use that. I can't seem anything in the docs to accomplish this.
Ideally, I'd just change 'url': 'latest.json' to something like 'local': json_variable
var pointsSource = new ol.source.GeoJSON({
'projection': map.getView().getProjection(),
'url': 'latest.json'
});
var pointsLayer = new ol.layer.Vector({
source: pointsSource,
style: new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 40],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'openlayers/marker-icon.png',
}))
})
});
map.addLayer(pointsLayer);

You can pass in your geojson data via the param 'object'.
The OL3 src is quite readable and often it is faster to read this to work out what to do than it is to hunt through the docs! I'm assuming you're using ol3.4 or earlier; here is the 3.2 src code for geojson:
https://github.com/openlayers/ol3/blob/v3.2.0/src/ol/source/geojsonsource.js
You can see it takes an object param, which is expecting a JS object, which is the result of JSON.parse("...your geojson string here...")
So something like:
var geojson_cache = "<?php output from PHP here ?>"
var geojson_object = JSON.parse(geojson_cache)
var pointsSource = new ol.source.GeoJSON({
'projection': map.getView().getProjection(),
object: geojson_object
});
should do what you need.
Also FYI -- I mention OL3.4 or earlier above - the reason is that this class no longer exists in 3.5. You can see from that src file above that this class isn't much more than a wrapper around StaticVector with a ol.format.GeoJSON formatter attached. This has been refactored and will be replaced by ol.source.Vector and you provide the ol.format.GeoJSON formatter. Have a read of 'New Vector API' in these notes:
https://github.com/openlayers/ol3/releases/tag/v3.5.0

openlayers loading strategy geojson with different resolutions

I'm trying to load geojson data with openlayers 3. It's a lot of date, so I want to transfer just the data needed. I archived this by passing resulution and extent of the current view to the webservice. This is my code so far:
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'data.json?e=' + extent.join(',') + '&r=' + resolution;
$.ajax({
url: url,
success: function(data) {
vectorSource.addFeatures(vectorSource.readFeatures(data));
}
});
},
projection: 'EPSG:3857',
strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 0
})
});
But my code only calls the webservice once. Which loading strategy do I have to use to call the webservice everytime the extent (and/or the resulution) changes?

ol.source.ServerVector does not know that you return different results for different resolutions. It remembers the areas loaded and does not load an area if it "knows" that its features are already loaded.
Your example initially loads the whole world (zoom=0), therefore no additional load is needed ever. Replace zoom=0 by lets say zoom=10: now a zoom out will trigger a load, because the larger area is not already known, while a zoom in will not trigger a load.
To reload on every change of resolution, you have to clear the memory.
Add after the definition of your map:
map.getView().on('change:resolution', function(evt){
alert ('resolution changed');
vectorSource.clear();
});
This code clears the memory each time the resolution changes and forces a load to be triggered.

downloadUrl function not working for creating google map locator with opencart

I am using opencart to develop http://www.goskitz.com.au/index.php?route=information/dealers
In the dealers.php file there is a function called query() which will search postcodes from the database to get the store locations results and I outputted to XML format. For example, if I typed 3000 and select Melbourne, the xml output would be:
function query():
public function query(){
// the query coding part is removed
// Output to XML
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
foreach($result as $key => $li){
// ADD TO XML DOCUMENT NODE
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name",$li['name']);
$newnode->setAttribute("address", $li['address']);
$newnode->setAttribute("lat", $li['lat']);
$newnode->setAttribute("lng", $li['lng']);
$newnode->setAttribute("distance", $li['distance']);
}
echo $dom->saveXML();
}
}
Output
<markers><marker name="Harvey Norman BIG BUYS" address="Shop 9&11 Ground Level Springvale Homemaker Centre 917 Princes Highway Springval VIC 3171" lat="-37.927456" lng="145.143845" distance="19.74128375361586"></marker>....blahblah... <markers>
Then I found the downloadurl function is not working, no matter what url I put, nothing happens. Why would that happen?
Any idea would be grateful.
I have paste the javascript in http://pastebin.com/yu0bX3vz

The piece of code you are showing here is responsible for the generation of the XML.
The generated XML contains the marker data, which needs to be parsed and handed over to Google Maps API, in order to draw the markers.
The first thing you might want to do is, to get one marker working, then level up to multiple markers. Just try to get the XML right and the marker(s) to be drawn on the map.
The map must be initialized before you try to add marker(s).
If that works out, proceed to load the marker XML dynamically via jQuery.
Because you are already working with jQuery, i suggest to drop the downloadURL() function, in favor of a simple jQuery Ajax .get() request with an added success function, for parsing the incomming response XML.
$(document).ready(function()
{
$.ajax({
type: "GET",
url: "markers.xml", // xml source: either static xml file or xml generated by php
dataType: "xml",
success: parseXml // parse the marker xml
});
});
// the idea is: from xml -> to var "location" -> addMarker(location)
function parseXml(xml)
{
// foreach marker extract the xml data (lat,long,...)
$(xml).find("marker").each(function(index){
// and assign to a new location var
var location.lat = $(this).find('lat').text();
var location.long = $(this).find('long').text();
var location.name = $(this).find('name').text();
// then use this data to add the marker
addMarker(location);
)
}
function addMarker(location)
{
// the marker is a "point" on the map defined by it's lat/long
var point = new google.maps.LatLng(location.lat, location.lng);
var marker = new google.maps.Marker({
position:point,
map: map,
title: location.name
});
};
If you need to bind an info window or something, which pops up, when clicked on the marker icon,
then please search for bindInfoWindow() in this article https://developers.google.com/maps/articles/phpsqlajax_v3
I think, this is the origin of this downloadURL() function you got, but in this tutorial, they don't use jQuery, like you do.
This question might be of help too: Loading XML via jQuery for Google Maps API V3