|
|
@@ -0,0 +1,218 @@
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<title>OSM</title>
|
|
|
+<style>
|
|
|
+
|
|
|
+#map {
|
|
|
+ width: 100%;
|
|
|
+ height: 300pt;
|
|
|
+}
|
|
|
+
|
|
|
+#info {
|
|
|
+ text-align: right;
|
|
|
+ font-family: Arial;
|
|
|
+ padding-top: 3pt;
|
|
|
+}
|
|
|
+
|
|
|
+.popup {
|
|
|
+ font-size: 8pt;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+
|
|
|
+var map;
|
|
|
+var mercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
|
|
|
+var center = mercator({x: 9.1899719, y: 45.4865452});
|
|
|
+var zoom = 14;
|
|
|
+
|
|
|
+function init() {
|
|
|
+
|
|
|
+ // Layer with map
|
|
|
+ map = new OpenLayers.Map("map", {projection:"EPSG:3857"});
|
|
|
+ var osm = new OpenLayers.Layer.OSM();
|
|
|
+
|
|
|
+ var features = [];
|
|
|
+ for(var i = 0; i < 5; i++) {
|
|
|
+ features[i] = new OpenLayers.Feature.Vector(
|
|
|
+ mercator( new OpenLayers.Geometry.Point( 9.1899719 - 0.05 * Math.random(), 45.4865452 + 0.02 * Math.random())),
|
|
|
+ { id : i },
|
|
|
+ {
|
|
|
+ //fillColor : 'purple',
|
|
|
+ //fillOpacity : 0.8,
|
|
|
+ //strokeColor : "black",
|
|
|
+ //strokeOpacity : 1,
|
|
|
+ //strokeWidth : 1,
|
|
|
+ //pointRadius : 10,
|
|
|
+ externalGraphic: 'https://openclipart.org/image/400px/204420',
|
|
|
+ graphicWidth: 34, graphicHeight: 48, graphicYOffset: -17,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // Layer with listeners
|
|
|
+ var vector = new OpenLayers.Layer.Vector(
|
|
|
+ "Points",
|
|
|
+ {
|
|
|
+ eventListeners:{
|
|
|
+ 'featureselected': function(evt) {
|
|
|
+ var feature = evt.feature;
|
|
|
+ var popup = new OpenLayers.Popup.FramedCloud(
|
|
|
+ "popup",
|
|
|
+ OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
|
|
|
+ null,
|
|
|
+ "<div class='popup'>Point number #" + feature.attributes.id +
|
|
|
+ "<br>Lorem ipsum dolor sit amet, consectetaur adipisicing elit...</div>",
|
|
|
+ null,
|
|
|
+ false
|
|
|
+ );
|
|
|
+ feature.popup = popup;
|
|
|
+ map.addPopup(popup);
|
|
|
+ },
|
|
|
+ // Destroy popup
|
|
|
+ 'featureunselected': function(evt) {
|
|
|
+ var feature = evt.feature;
|
|
|
+ map.removePopup(feature.popup);
|
|
|
+ feature.popup.destroy();
|
|
|
+ feature.popup = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ vector.addFeatures(features);
|
|
|
+
|
|
|
+ // Select feature control
|
|
|
+ var selector = new OpenLayers.Control.SelectFeature(
|
|
|
+ vector,
|
|
|
+ {
|
|
|
+ toggle:true,
|
|
|
+ clickout: true,
|
|
|
+ autoActivate:true
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ map.addLayers([osm, vector]);
|
|
|
+ map.addControl(selector);
|
|
|
+ map.setCenter(new OpenLayers.LonLat(center.x, center.y), zoom);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+<!-- https://www.bennadel.com/blog/1504-ask-ben-parsing-csv-strings-with-javascript-exec-regular-expression-command.htm -->
|
|
|
+<script>
|
|
|
+// This will parse a delimited string into an array of
|
|
|
+ // arrays. The default delimiter is the comma, but this
|
|
|
+ // can be overriden in the second argument.
|
|
|
+ function CSVToArray( strData, strDelimiter ){
|
|
|
+ // Check to see if the delimiter is defined. If not,
|
|
|
+ // then default to comma.
|
|
|
+ strDelimiter = (strDelimiter || ",");
|
|
|
+
|
|
|
+ // Create a regular expression to parse the CSV values.
|
|
|
+ var objPattern = new RegExp(
|
|
|
+ (
|
|
|
+ // Delimiters.
|
|
|
+ "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
|
|
|
+
|
|
|
+ // Quoted fields.
|
|
|
+ "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
|
|
|
+
|
|
|
+ // Standard fields.
|
|
|
+ "([^\"\\" + strDelimiter + "\\r\\n]*))"
|
|
|
+ ),
|
|
|
+ "gi"
|
|
|
+ );
|
|
|
+
|
|
|
+
|
|
|
+ // Create an array to hold our data. Give the array
|
|
|
+ // a default empty first row.
|
|
|
+ var arrData = [[]];
|
|
|
+
|
|
|
+ // Create an array to hold our individual pattern
|
|
|
+ // matching groups.
|
|
|
+ var arrMatches = null;
|
|
|
+
|
|
|
+
|
|
|
+ // Keep looping over the regular expression matches
|
|
|
+ // until we can no longer find a match.
|
|
|
+ while (arrMatches = objPattern.exec( strData )){
|
|
|
+
|
|
|
+ // Get the delimiter that was found.
|
|
|
+ var strMatchedDelimiter = arrMatches[ 1 ];
|
|
|
+
|
|
|
+ // Check to see if the given delimiter has a length
|
|
|
+ // (is not the start of string) and if it matches
|
|
|
+ // field delimiter. If id does not, then we know
|
|
|
+ // that this delimiter is a row delimiter.
|
|
|
+ if (
|
|
|
+ strMatchedDelimiter.length &&
|
|
|
+ (strMatchedDelimiter != strDelimiter)
|
|
|
+ ){
|
|
|
+
|
|
|
+ // Since we have reached a new row of data,
|
|
|
+ // add an empty row to our data array.
|
|
|
+ arrData.push( [] );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // Now that we have our delimiter out of the way,
|
|
|
+ // let's check to see which kind of value we
|
|
|
+ // captured (quoted or unquoted).
|
|
|
+ if (arrMatches[ 2 ]){
|
|
|
+
|
|
|
+ // We found a quoted value. When we capture
|
|
|
+ // this value, unescape any double quotes.
|
|
|
+ var strMatchedValue = arrMatches[ 2 ].replace(
|
|
|
+ new RegExp( "\"\"", "g" ),
|
|
|
+ "\""
|
|
|
+ );
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ // We found a non-quoted value.
|
|
|
+ var strMatchedValue = arrMatches[ 3 ];
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // Now that we have our value string, let's add
|
|
|
+ // it to the data array.
|
|
|
+ arrData[ arrData.length - 1 ].push( strMatchedValue );
|
|
|
+ }
|
|
|
+
|
|
|
+ // Return the parsed data.
|
|
|
+ return( arrData );
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+</head>
|
|
|
+
|
|
|
+<body onload="init();">
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <form>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ <input type="text" value="" size="40"
|
|
|
+ onblur="// console.log( CSVToArray( this.value, ' ' ) );"
|
|
|
+ />
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div id="map"></div>
|
|
|
+
|
|
|
+ <div id="info">
|
|
|
+ <a href="https://www.openstreetmap.org/">OpenStreetMap</a> |
|
|
|
+ <a href="https://wiki.openstreetmap.org/">OSM Wiki</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+
|
|
|
+</html>
|
netico