|
POST
|
Here is some rough code I used to prototypef. The idea was to find addresses (points) within a distance of ___. Since my Address source had over a million points, I created a circle and used it's bounds to select the points, then used a function to select points inside the circle. Finally drawing them based on the quad they were in and creating a CSV of the points. <html> <head> <meta charset=utf-8 /> <title>test App</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <!-- Load Leaflet from CDN--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.3/esri-leaflet-geocoder.css"> <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js"></script> <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js"></script> <script src="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.3/esri-leaflet-geocoder.js"></script> <style> body { margin:0; padding:0; } #map { position: absolute; top:40; bottom:0; right:0; left:0; max-height:640px; max-width:950px} </style> </head> <body> <div id="header"> <div id="Point" class="leaflet-bar"> <label> Search Coordinates: <input id="Ypt" class="leaflet-bar" placeholder="Latitude" /> <input id="Xpt" class="leaflet-bar" placeholder="Longitude" /> </label> </label> Search Radius: <input id="Rdistance" class="leaflet-bar" placeholder="Radius (Yards)"size="6" /> <button id="goBtn" onClick="goBtn()" class="leaflet-bar">Go</button> </div> </div> <div id="map"></div> <script> document.getElementById("Rdistance").value = 200; var map = L.map('map').setView([43, -75], 7); var theRadius; //start Basemaps var layer1 = L.esri.basemapLayer('Topographic'); var layer2 = L.esri.basemapLayer('Streets'); var layer3 = L.esri.basemapLayer('NationalGeographic'); // maps with labels var layer4 = L.layerGroup([ L.esri.basemapLayer('Imagery'), L.esri.basemapLayer('ImageryLabels') ]); var layer6 = L.layerGroup([ L.esri.basemapLayer('Oceans'), L.esri.basemapLayer('OceansLabels') ]); var layer7 = L.layerGroup([ L.esri.basemapLayer('Gray'), L.esri.basemapLayer('GrayLabels') ]); var layer8 = L.layerGroup([ L.esri.basemapLayer('DarkGray'), L.esri.basemapLayer('DarkGrayLabels') ]); var layer9 = L.layerGroup([ L.esri.basemapLayer('Terrain'), L.esri.basemapLayer('TerrainLabels') ]); var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // end basemaps function goBtn() { var theLatValue = document.getElementById("Ypt").value; var theLonValue = document.getElementById("Xpt").value; var theRadiusValue = document.getElementById("Rdistance").value; theRadius = parseFloat(theRadiusValue) * 0.9144; if (theRadius !== 0) { console.log("Button Pressed, coords are: " + theLatValue + ", " + theLonValue); console.log("Radius is: " + theRadius + " Meters"); // Call function to pass it an X,Y, and have it run. Mapit(theLonValue, theLatValue, theRadius); // LAT: 42.76346 and LONG: -73.78285 } else { alert("Radius is Zero Length, Please change value"); } } alert("To test coord entry use LAT: 42.76346 and LONG: -73.78285 Distance is Yards"); var thelatlng; var clickCircle; var bounds; var geojsonLayer; var PointX = 0; var PointY = 0; function Mapit(x, y, theRadius) { console.log(x + ", " + y + " Values"); PointX = parseFloat(x); PointY = parseFloat(y); var latY = parseFloat(y); var longX = parseFloat(x); if (latY === 0 || longX === 0) { alert("Invalid Coordinate value , Please check value"); } var thelatlng = L.latLng(latY, longX); theCircle = L.circle(thelatlng, theRadius, { color: 'blue', fillOpacity: 0, opacity: 0.5 }).addTo(map); //Zoom to Circle //I use the bounds of the circle to query against to avoid a 1 million point query. map.fitBounds(theCircle.getBounds()); var bounds = theCircle.getBounds(); var query = L.esri.query({ url: 'http://gisservices.dhses.ny.gov/arcgis/rest/services/SAM_Address_Points/MapServer/1' }); query.within(bounds); query.run(function(error, featureCollection, response) { console.log('Found ' + featureCollection.features.length + ' features'); if (featureCollection.features.length < 1) { alert("No Addresses in the selected zone"); } var myGeoJSON = JSON.stringify(featureCollection); //Symbolize the Points var geojsonMarkerOptions = { radius: 8, fillColor: "green", color: "#green", weight: 1, opacity: 1, fillOpacity: 0.8 }; geojsonLayer = L.geoJson(featureCollection, { pointToLayer: function(feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions); }, onEachFeature: function(feature, layer) { } }); //.addTo(map); //no need to add to map, these are the points from the bounds query var test = []; var theCenterPt = thelatlng; // bounds.getCenter(); // layer.getLatLng(); //var theRadius = theRadius; var counter_points_in_circle = 0; var marker = L.marker(thelatlng).bindPopup("CTR").addTo(map); // Loop through each point in GeoJSON file //var allPoints = L.geoJson(data); geojsonLayer.eachLayer(function(layer) { // Lat, long of current point layer_lat_long = layer.getLatLng(); // Distance from our circle marker To current point in meters distance_from_centerPoint = layer_lat_long.distanceTo(theCenterPt); // See if meters is within radius if (distance_from_centerPoint <= theRadius) { counter_points_in_circle += 1; test.push(layer.feature); } }); console.log(test.length + " Points in Circle"); var myGeoJSON2 = JSON.stringify(test); //data from the buffer query dataExport(test, theCenterPt); //Symbolize the Points var geojsonMarkerOptions2 = { radius: 8, fillColor: "red", color: "red", weight: 1, opacity: 1, fillOpacity: 0.8 }; geojsonLayer2 = L.geoJson(test, { pointToLayer: function(feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions2); }, onEachFeature: function(feature, layer) {} }); }); // creating a CSV file from selection function dataExport(response, theCenter) { var homes = new L.LayerGroup(); var thebounds = new L.LatLngBounds(); var i; var str = "Record, Longitude, Latitude, Street, City, Quad \r\n "; for (i = 0; i < response.length; i++) { var city = response.properties.CityTownName; var theQuad = quad(response.geometry.coordinates); var add = ''; if (response.properties.AP_Flag !== null) { add = response.properties.AddressLabel.replace(/(\r\n|\n|\r)/gm, " ").replace(response.properties.AP_Flag, ''); } else { add = response.properties.AddressLabel.replace(/(\r\n|\n|\r)/gm, " "); } response.properties.Record = (i + 1); //Adding in Record to GeoJSON response.properties.Quad = theQuad; //Adding in Quad to GeoJSON response.properties.FullAdd = add.trim(); var line = ''; line += (i + 1) + ", " + response.geometry.coordinates + ", " + add.trim() + ", " + city + ", " + theQuad; str += line + '\r\n'; } sites(response); function sites(response5) { function getColor(d) { return d == 'NE' ? '#0000CD' : d == 'SE' ? '#008000' : d == 'SW' ? '#FFFF00' : d == 'NW' ? '#FF0000' : '#A9A9A9'; } geojsonLayer3 = L.geoJson(response5, { pointToLayer: function(feature, latlng) { var markerStyle = { fillColor: getColor(feature.properties.Quad), color: "#696969", fillOpacity: 0.8, opacity: 0.9, weight: 1, radius: 8 }; return L.circleMarker(latlng, markerStyle); }, onEachFeature: function(feature, layer) { layer.bindPopup("<p>Record: " + feature.properties.Record + "</br>Address: " + feature.properties.FullAdd + "</br> Quad: " + feature.properties.Quad + "</p>").addTo(map), layer.addTo(map); } }); map.addLayer(geojsonLayer3); map.fitBounds(geojsonLayer3.getBounds()); //Zoom to selected set } var exportFilename = "MapData.csv"; var csvData = new Blob([str], { type: 'text/csv;charset=utf-8;' }); //IE11 & Edge if (navigator.msSaveBlob) { navigator.msSaveBlob(csvData, exportFilename); } else { //In FF link must be added to DOM to be clicked var link = document.createElement('a'); link.href = window.URL.createObjectURL(csvData); link.setAttribute('download', exportFilename); document.body.appendChild(link); link.click(); document.body.removeChild(link); } // Takes the point coords and determines if they are NE,SE,SW, or NW of the center Pt function quad(value) { var theValue = ""; var theAddress = value.toString().split(','); var addresslatC = theAddress[0]; var addresslongC = theAddress[1]; var theY = parseFloat(addresslongC); var theX = parseFloat(addresslatC); var theCentY = PointY; var theCentX = PointX; if (theX > theCentX) { if (theY > theCentY) { theValue = "NE"; } else { theValue = "SE"; } } else { if (theY > theCentY) { theValue = "NW"; } else { theValue = "SW"; } } return theValue; // End of Quad function } } } // create the geocoding control and add it to the map var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider(); var searchControl = L.esri.Geocoding.geosearch({ providers: [arcgisOnline] }).addTo(map); var results = L.layerGroup().addTo(map); // listen for the results event and add every result to the map searchControl.on("results", function(data) { results.clearLayers(); for (var i = data.results.length - 1; i >= 0; i--) { // results.addLayer(L.marker(data.results[0].latlng)); var home = data.results[0].latlng; // alert(home); var coord = home.toString().split(','); var lat = coord[0].split('('); var long1 = coord[1].split(')'); if (i < 1) { var theRadiusValue = document.getElementById("Rdistance").value; theRadius = parseFloat(theRadiusValue) * 0.9144; Mapit(long1[0], lat[1], theRadius); } } }); //layer control var baseMaps = { 'Topographic': layer1, 'Streets': layer2, 'NationalGeographic': layer3, 'Imagery': layer4, 'Oceans': layer6, 'Gray': layer7, 'DarkGray': layer8, 'Terrain': layer9 }; var overlayMaps = { }; L.control.layers(baseMaps, overlayMaps, { autoZIndex: "true" }).addTo(map); ////////////// end layer control </script> </body> </html>
... View more
08-19-2016
11:32 AM
|
0
|
0
|
2432
|
|
POST
|
That worked. Thanks, you saved me hours of manually clicking through each service to see where my problems lie.
... View more
08-19-2016
10:36 AM
|
0
|
1
|
1215
|
|
POST
|
I need to find a way to determine what the cache levels are for our services. We use a 4 tier method for app development, dev, eval, production, public. Some apps use up to 20 different services, Like the 4 different app development process, we do the same with ArcServer services. Problem is our cache levels for a service in each level seem to be different, Different creator or created at different time periods. This we get different responses in each app. What I need is to write a python script to query the service to determine what cache levels it's using, and to use this info to create a new service. Can Arcpy do this or is there a work around?
... View more
08-19-2016
07:00 AM
|
0
|
4
|
2144
|
|
POST
|
I solved the circle to GeoJSOn issue by first getting the points within the circles bounding box, then I loop through the data and check : if (distance_from_centerPoint <= theRadius) { myData.push(layer.feature); } It's fairly quick to get all the address points and attributes within my mile or 1/2 mile circle. Thanks It looks like option 2 with 4 different colors is it.
... View more
07-13-2016
09:52 AM
|
0
|
0
|
1746
|
|
POST
|
I need to use a circle to select points, but I need to identify which points are in the NE, SE, SW, NW quads of the circle.. Since my circle is created by Lat/Long and a Radius, with the Radius being in meters how can I draw a line to bisect it into quarters?
My thoughts were to first select the points by circle, then create 4 squares(quads) and use them to further select the points inside the circle. However it turns out you need lat/longs to draw a square and I'd need to figure out how to get the Min/Max values for a square so many meters wide. Finally for the map graphic I'd have to clip the box using the circle.
My second option was create 4 arrays (NE,SE, SW, NW) and just run a check to see if they are North and East of the circle center coordinate, etc and place them in the correct array, than symbolize then using different colors based on array values.
Does anyone have any thoughts, Ideas, links, or code examples?
... View more
07-13-2016
09:19 AM
|
0
|
2
|
2899
|
|
POST
|
Sorry i was never notified of your question, did you ever figure this out? I know upper/lower case makes a difference, and in GeoJSON without SDE it's features[0].properties.FIELDNAME
... View more
07-13-2016
08:57 AM
|
0
|
0
|
1758
|
|
POST
|
Send me an e-mail, I’ll send some commented code … BTW, I like Carlisle, my parents were there when I went to Ship. Bill Chappell ITS Group - GIS Developer 800 North Pearl Street- Room 222 Menards, NY 12204 518-408-0185 William.Chappell@Its.ny.gov<mailto:William.Chappell@Its.ny.gov>
... View more
03-31-2016
08:21 AM
|
0
|
0
|
2538
|
|
POST
|
I like your answer, I've played with leaflet enough that I just now handle a dynamic service as a feature service to enable the better drawing, using color symbology, popups, and dynamic legends. Also putting the labels in a separate service allows you to put them in a layer switcher and the user can turn the layer on/off himself.
... View more
03-31-2016
07:49 AM
|
0
|
2
|
2538
|
|
POST
|
Note that the reason I am getting the instance/tablename/fieldname is the service has a joined table, if I remove the join just the fieldnames appear in the service and everything works as advertised in Johns post.
... View more
03-04-2016
05:58 AM
|
0
|
0
|
2089
|
|
POST
|
Got it.. Downloaded http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js Changed this : templateRe: /\{ *(+) *\}/g, To this: templateRe: /\{ *(+) *\}/g, << Notice the period after the w Now return L.Util.template(' Name: {DOHGIS.NYSDOH_CI_DATA.NAME} ', evt.feature.properties); Returns the popup with the name. Getting around the periods from SDE. Just need to run the custom lib locally.
... View more
03-02-2016
09:04 AM
|
0
|
0
|
2089
|
|
POST
|
Progress, it appears to be the periods that are causing the problem. We can make it work by modifying the library and creating an alias but this is not the idea solution. It looks like someone else using sde and creating a dynamic service and using it as a fetureService will also have this issue. As a dynamic service I can get it working using this example: http://esri.github.io/esri-leaflet/examples/customizing-popups.html featureCollection.features[0].properties["Facility Name"]; //<<< DOHGIS.NYSDOH_CI_DATA. MY service fields: • DOHGIS.NYSDOH_CI_DATA.OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID ) • DOHGIS.NYSDOH_CI_DATA.ID ( type: esriFieldTypeString , alias: Facility ID , length: 35 ) • DOHGIS.NYSDOH_CI_DATA.IDTYPE ( type: esriFieldTypeString , alias: Facility ID Type , length: 100 ) • DOHGIS.NYSDOH_CI_DATA.NAME ( type: esriFieldTypeString , alias: Facility Name , length: 250 ) The working service fields: OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID ) Shape ( type: esriFieldTypeGeometry , alias: Shape ) NAME ( type: esriFieldTypeString , alias: NAME , length: 31 ) ID ( type: esriFieldTypeDouble , alias: ID ) It must be related to the SDE Instance/Table/FieldName structure. DOHGIS.NYSDOH_CI_DATA.NAME gives me a popup that says: ‘Name: { DOHGIS.NYSDOH_CI_DATA.NAME}’ NAME errors off, says No value provided for variable Using the field Alias: Facility Name gives me a popup that says: ‘Name: { Facility Name }’ “Facility Name” gives me a popup that says: ‘Name: { “Facility Name” }’
... View more
03-02-2016
08:22 AM
|
0
|
1
|
2089
|
|
POST
|
Ok, Now I’m really confused, because my mapservice is behind a firewall, I found one that wasn’t and using the same code the new example worked while my service doesn’t. So just changing the url gives me a working example, the only thing I can see different is the field names. My code: // Hosp Points var hosp = L.esri.featureLayer() }}).addTo(map); hosp.bindPopup(function (evt) { return L.Util.template(' Name: {NAME} ID: ', evt.feature.properties); //Both services have a NAME and ID field.. }); MY service fields: • DOHGIS.NYSDOH_CI_DATA.OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID ) • DOHGIS.NYSDOH_CI_DATA.ID ( type: esriFieldTypeString , alias: Facility ID , length: 35 ) • DOHGIS.NYSDOH_CI_DATA.IDTYPE ( type: esriFieldTypeString , alias: Facility ID Type , length: 100 ) • DOHGIS.NYSDOH_CI_DATA.NAME ( type: esriFieldTypeString , alias: Facility Name , length: 250 ) The working service fields: OBJECTID ( type: esriFieldTypeOID , alias: OBJECTID ) Shape ( type: esriFieldTypeGeometry , alias: Shape ) NAME ( type: esriFieldTypeString , alias: NAME , length: 31 ) ID ( type: esriFieldTypeDouble , alias: ID ) It must be related to the SDE Instance/Table/FieldName structure. DOHGIS.NYSDOH_CI_DATA.NAME gives me a popup that says: ‘Name: { DOHGIS.NYSDOH_CI_DATA.NAME}’ NAME errors off, says No value provided for variable Using the field Alias: Facility Name gives me a popup that says: ‘Name: { Facility Name }’ “Facility Name” gives me a popup that says: ‘Name: { “Facility Name” }’
... View more
03-02-2016
07:03 AM
|
0
|
0
|
2089
|
|
POST
|
I had a DynamicMapLayer that I needed to style like a featurelayer. and I found this link which helped a little.
Style a DynamicMapLayer · Issue #321 · Esri/esri-leaflet · GitHub
Now my points show up as custom icon and my definition query works.
However the popup doesn't work quite right. I can get the hosp.bindPopup to open, but it doesn't see the fields in the service like a true featureService does. My html shows up, that's it.
I tried the Identifying Features | Esri Leaflet example but it doesn't work I get hosp.identify is not a function and it fails.
As a dynamicMapLayer the following worked but not now.
hosp.bindPopup(function (error, featureCollection) {
if(error || featureCollection.features.length === 0) {
return false;
} else {
return ' Name: ' + featureCollection.features[0].properties["Facility Name"] + "<br> Facility Type: "+featureCollection.features[0].properties["Facility Type"];
}
});
What I really need is to symbolize and definition query my DynamicMapService and have a popup that shows some attributes, Any ideas, examples?
... View more
03-01-2016
01:44 PM
|
0
|
5
|
7135
|
|
POST
|
featureCollection.features[0].properties["Facility Name"]; Got It... I removed the period after the properties and encased my quotes within brackets.
... View more
03-01-2016
11:58 AM
|
1
|
2
|
1758
|
|
POST
|
Hi, I'm trying to make a simple leaflet map with a popup but I'm having trouble with the field name in the popup. Following the example Custom Popup with Dynamic Map Layer | Esri Leaflet you can see the popup is based on featureCollection.features[0].properties.FIELDNAME, my issue is my data is in SDE and I get this: DOHGIS.NYSDOH_CI_DATA.NAME ( type: esriFieldTypeString , alias: Facility Name , length: 250 ) featureCollection.features[0].properties.DOHGIS.NYSDOH_CI_DATA.NAME doesn't work because of the periods in the name. featureCollection.features[0].properties.NAME doesn't work.. If I use the alias I get featureCollection.features[0].properties."Facility Name" this doesn't work because of the quotes and space. var temp = "Facility Name" featureCollection.features[0].properties.temp; also fails. Of course fieldnames with an underscore instead of a space work. Beyond adding new fields to fix the database any ideas? Thanks, Bill
... View more
03-01-2016
11:18 AM
|
0
|
3
|
5710
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 12-05-2016 09:27 AM | |
| 1 | 06-12-2020 07:41 AM | |
| 1 | 12-23-2016 05:32 AM | |
| 1 | 11-23-2015 08:44 AM | |
| 1 | 11-25-2015 01:59 PM |
| Online Status |
Offline
|
| Date Last Visited |
09-22-2021
12:31 PM
|