Skip to content

Instantly share code, notes, and snippets.

@mapmeld

mapmeld/parking-app-hnl.html

Created May 17, 2012 17:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mapmeld/2720546 to your computer and use it in GitHub Desktop.
Save mapmeld/2720546 to your computer and use it in GitHub Desktop.
Download ZIP
Parking App using HNL data, Esri maps
Raw
parking-app-hnl.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Parcel Locator</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.esriScalebar {
padding: 20px 20px;
}
#map {
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8compact"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Popup");
dojo.require("esri.tasks.closestfacility");
dojo.require("esri.tasks.locator");
var map;
var parking;
var locator;
var closestFacilityTask, xwork;
esri.config.defaults.io.proxyUrl = "proxy.php";
function init() {
//apply a selection symbol that determines the symbology for selected features
var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([111, 0, 255]), 2), new dojo.Color([111, 0, 255, 0.15]));
closestFacilityTask = new esri.tasks.ClosestFacilityTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Closest Facility");
//new esri.tasks.ClosestFacilityTask("http://maps.esri.com/apl4/rest/services/CCH/StreetNetwork/NAServer/Closest Facility");
locator = new esri.tasks.Locator("http://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_NA/GeocodeServer");
var popup = new esri.dijit.Popup({
fillSymbol: sfs
}, dojo.create("div"));
map = new esri.Map("map", {
infoWindow: popup
});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
map.setExtent( new esri.geometry.Extent({
xmax: -17529456,
xmin: -17637844,
ymax: 2472699,
ymin: 2420493
}) );
//apply a popup template to the parking layer to format popup info
var popupTemplate = new esri.dijit.PopupTemplate({
title: "{Loc_name}",
fieldInfos: [{
fieldName: "Address",
label: 'Address:',
visible: true
}, {
fieldName: "Entry",
label: "Entry:",
visible: true
}, {
fieldName: "Exit",
label: "Exit:",
visible: true
}]
});
//add the parking layer to the map as a feature layer in selection mode
parking = new esri.layers.FeatureLayer("http://services.arcgis.com/tNJpAOha4mODLkXz/arcgis/rest/services/PARKING_HNL/FeatureServer/0", {
outFields: ["*"]
});
parking.setSelectionSymbol(sfs);
routeGraphicLayer = new esri.layers.GraphicsLayer();
var routePolylineSymbol = new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([100,0,200]),
4.0
);
var routeRenderer = new esri.renderer.SimpleRenderer(routePolylineSymbol);
routeGraphicLayer.setRenderer(routeRenderer);
map.addLayer(routeGraphicLayer);
var incidentPointSymbol = new esri.symbol.PictureMarkerSymbol({
"url":"http://google-maps-icons.googlecode.com/files/parking.png",
"height":24,
"width":20,
"yoffset":12,
"type":"esriPMS"
});
incidentsGraphicsLayer = new esri.layers.GraphicsLayer();
var incidentsRenderer = new esri.renderer.SimpleRenderer(incidentPointSymbol);
incidentsGraphicsLayer.setRenderer(incidentsRenderer);
map.addLayer(incidentsGraphicsLayer);
//when users click on the map select the parcel using the map point and update the url parameter
dojo.connect(map, 'onClick', function (e) {
var query = new esri.tasks.Query();
query.geometry = map.extent;
var deferred = parking.queryFeatures(query, function(featureset){
params = new esri.tasks.ClosestFacilityParameters();
params.defaultCutoff= 300.0;
params.returnIncidents=true;
params.returnRoutes=true;
params.returnDirections=true;
params.outSpatialReference = map.spatialReference;
var incidents = new esri.tasks.FeatureSet();
incidents.features = [ new esri.Graphic( new esri.geometry.Point( e.mapPoint.x, e.mapPoint.y, map.spatialReference ) ) ];
params.incidents = incidents;
var facilities = new esri.tasks.FeatureSet();
facilities.features = parking.graphics;
params.facilities = facilities;
closestFacilityTask.solve(params,function(solveResult){
var directions = solveResult.directions;
dojo.forEach(solveResult.routes, function(route, index){
//build an array of route info
var attr = dojo.map(solveResult.directions[index].features,function(feature){
return feature.attributes.text;
});
var infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
route.setInfoTemplate(infoTemplate);
route.setAttributes(attr);
routeGraphicLayer.add(route);
console.log(route.geometry.paths[0][route.geometry.paths[0].length-1]);
var minDistance = 1000000000000;
var minPark = null;
dojo.forEach(deferred.results[0].features, function(space){
var distance = Math.pow(route.geometry.paths[0][route.geometry.paths[0].length-1][0] - space.geometry.x, 2) + Math.pow(route.geometry.paths[0][route.geometry.paths[0].length-1][1] - space.geometry.y, 2)
if(distance < minDistance){
minDistance = distance;
minPark = space;
}
});
//console.log(minPark);
incidentsGraphicsLayer.clear();
incidentsGraphicsLayer.add(new esri.Graphic( new esri.geometry.Point( minPark.geometry.x, minPark.geometry.y )));
//map.extent = route.geometry.getExtent();
});
//xwork = solveResult.routes[0].geometry;
});
});
//console.log(deferred.results[0][0]);
});
map.addLayer(parking);
dojo.connect(map, 'onLoad', function (theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
}
function geolocate(){
navigator.geolocation.getCurrentPosition(function(position){
var mapPoint = new esri.geometry.Point(position.coords.longitude, position.coords.latitude);
mapPoint = esri.geometry.geographicToWebMercator(mapPoint);
map.setExtent( map.extent.centerAt(mapPoint) );
var query = new esri.tasks.Query();
query.geometry = map.extent.centerAt(mapPoint);
var deferred = parking.queryFeatures(query, function(featureset){
params = new esri.tasks.ClosestFacilityParameters();
params.defaultCutoff= 300.0;
params.returnIncidents=true;
params.returnRoutes=true;
params.returnDirections=true;
params.outSpatialReference = map.spatialReference;
var incidents = new esri.tasks.FeatureSet();
incidents.features = [ new esri.Graphic( new esri.geometry.Point( mapPoint.x, mapPoint.y, map.spatialReference ) ) ];
params.incidents = incidents;
var facilities = new esri.tasks.FeatureSet();
facilities.features = parking.graphics;
params.facilities = facilities;
closestFacilityTask.solve(params,function(solveResult){
var directions = solveResult.directions;
dojo.forEach(solveResult.routes, function(route, index){
//build an array of route info
var attr = dojo.map(solveResult.directions[index].features,function(feature){
return feature.attributes.text;
});
var infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
//map.setExtent( route.geometry.extent, true );
route.setInfoTemplate(infoTemplate);
route.setAttributes(attr);
routeGraphicLayer.add(route);
//console.log(route.geometry.paths[0][route.geometry.paths[0].length-1]);
var minDistance = 1000000000000;
var minPark = null;
dojo.forEach(deferred.results[0].features, function(space){
var distance = Math.pow(route.geometry.paths[0][route.geometry.paths[0].length-1][0] - space.geometry.x, 2) + Math.pow(route.geometry.paths[0][route.geometry.paths[0].length-1][1] - space.geometry.y, 2)
if(distance < minDistance){
minDistance = distance;
minPark = space;
}
});
//console.log(minPark);
incidentsGraphicsLayer.clear();
incidentsGraphicsLayer.add(new esri.Graphic( new esri.geometry.Point( minPark.geometry.x, minPark.geometry.y )));
//map.extent = route.geometry.getExtent();
});
//xwork = solveResult.routes[0].geometry;
});
}, function(){ });
});
}
function address(){
var query = new esri.tasks.Query();
query.geometry = map.extent;
var deferred = parking.queryFeatures(query, function(featureset){
params = new esri.tasks.ClosestFacilityParameters();
params.defaultCutoff= 300.0;
params.returnIncidents=true;
params.returnRoutes=true;
params.returnDirections=true;
params.outSpatialReference = map.spatialReference;
var incidents = new esri.tasks.FeatureSet();
var fromArr = dojo.byId("fromaddress").value.split(","),
fromAddress = { Address:fromArr[0], City:"Honolulu", State:"HI" };
locator.addressToLocations(fromAddress, ["Loc_name"],
function(addressCandidates) {
var mapPoint = addressCandidates[0].location;
mapPoint = esri.geometry.geographicToWebMercator(mapPoint);
map.setExtent( map.extent.centerAt(mapPoint) );
incidents.features = [ new esri.Graphic( new esri.geometry.Point( mapPoint.x, mapPoint.y, map.spatialReference ) ) ];
params.incidents = incidents;
var facilities = new esri.tasks.FeatureSet();
facilities.features = parking.graphics;
params.facilities = facilities;
closestFacilityTask.solve(params,function(solveResult){
var directions = solveResult.directions;
dojo.forEach(solveResult.routes, function(route, index){
//build an array of route info
var attr = dojo.map(solveResult.directions[index].features,function(feature){
return feature.attributes.text;
});
var infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
//map.setExtent( route.geometry.extent, true );
route.setInfoTemplate(infoTemplate);
route.setAttributes(attr);
routeGraphicLayer.add(route);
//console.log(route.geometry.paths[0][route.geometry.paths[0].length-1]);
var minDistance = 1000000000000;
var minPark = null;
dojo.forEach(deferred.results[0].features, function(space){
var distance = Math.pow(route.geometry.paths[0][route.geometry.paths[0].length-1][0] - space.geometry.x, 2) + Math.pow(route.geometry.paths[0][route.geometry.paths[0].length-1][1] - space.geometry.y, 2)
if(distance < minDistance){
minDistance = distance;
minPark = space;
}
});
//console.log(minPark);
incidentsGraphicsLayer.clear();
incidentsGraphicsLayer.add(new esri.Graphic( new esri.geometry.Point( minPark.geometry.x, minPark.geometry.y )));
//map.extent = route.geometry.getExtent();
});
});
});
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 90%; margin-top: 18pt;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>
</div>
<div style="position:fixed;top:0;left:0;width:100%;height:18pt;">
<input id="fromaddress" type="text" placeholder="Address" style="vertical-align:top;"/>
<input type="button" value="Search" onclick="address()" style="vertical-align:top;"/>
|
<img src="http://www.khtml.org/osm/v0.83/images/geolocation.png" onclick="geolocate()" style="height:16pt;"/>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment