OSM Mashup

1) Längen- und Breitengrad rauskriegen: Bing Maps

2) nur ein Icon setzen


<html><body>
  <div id="Legende">
    <p><img src="http://daniel-bungert.de/Bibo/Schule.png" /> - Schulstandorte</p>
    <p><img src="http://daniel-bungert.de/Bibo/Ist-Standort.png" /> - Ist-Standort</p>
    <p><img src="http://daniel-bungert.de/Bibo/Soll-Standort.png" /> - Soll-Standort</p>
  </div>
  <div id="mapdiv"></div>
  
  

    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var rathaus = new OpenLayers.LonLat( 13.755147 ,52.528311 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
    var zoom=13;
 
    map.setCenter (rathaus, zoom);

    var markers = new OpenLayers.Layer.Markers( "Markers" );

    map.addLayer(markers);

	var size = new OpenLayers.Size(32, 32);
	var offset = new OpenLayers.Pixel(-(size.w/2), -size.h/2);
	var iconRathaus = new OpenLayers.Icon('http://daniel-bungert.de/Bibo/Soll-Standort.png',size, offset);
 
    markers.addMarker(new OpenLayers.Marker(rathaus, iconRathaus));
 
    var Marker = new Array();
    
    Marker[0] = new Object();
    Marker[0]["Label"] = "Rathaus Fredersdorf";
    Marker[0]["Longitude"] = 13.755147;
    Marker[0]["Latitude"] = 52.528311;
    Marker[0]["Type"] = "Soll-Standort";

    Marker[1] = new Object();
    Marker[1]["Label"] = "Bibliothek Petershagen, Lindenstr. 21";
    Marker[1]["Longitude"] = 13.770951;
    Marker[1]["Latitude"] = 52.523882;
    Marker[1]["Type"] = "Ist-Standort";

    Marker[2] = new Object();
    Marker[2]["Label"] = "Bibliothek Fredersdorf, Waldstr. 26";
    Marker[2]["Longitude"] = 13.75260863;
    Marker[2]["Latitude"] = 52.52353761;
    Marker[2]["Type"] = "Ist-Standort";

    Marker[3] = new Object();
    Marker[3]["Label"] = "Am Kreisverkehr";
    Marker[3]["Longitude"] = 13.761583;
    Marker[3]["Latitude"] = 52.523459;
    Marker[3]["Type"] = "Soll-Standort";

    Marker[4] = new Object();
    Marker[4]["Label"] = "Vier-Jahreszeiten-Grundschule, Posentsche Str. 60";
    Marker[4]["Longitude"] = 13.750704;
    Marker[4]["Latitude"] = 52.542225;
    Marker[4]["Type"] = "Schule";

    Marker[5] = new Object();
    Marker[5]["Label"] = "Fred-Vogel-Grundschule, Oberschule Fredersdorf, Tieckstr. 38";
    Marker[5]["Longitude"] = 13.751359;
    Marker[5]["Latitude"] = 52.520288;
    Marker[5]["Type"] = "Schule";

    Marker[6] = new Object();
    Marker[6]["Label"] = "Grundschule Eggersdorf, Karl-Marx-Straße 16";
    Marker[6]["Longitude"] = 13.821571;
    Marker[6]["Latitude"] = 52.540225;
    Marker[6]["Type"] = "Schule";

    Marker[7] = new Object();
    Marker[7]["Label"] = "Grundschule Am Dorfanger Petershagen, Mittelstraße 28";
    Marker[7]["Longitude"] = 13.827935;
    Marker[7]["Latitude"] = 52.547993;
    Marker[7]["Type"] = "Schule";

    Marker[8] = new Object();
    Marker[8]["Label"] = "Katholische Grundschule St. Hedwig, Elbestraße 48";
    Marker[8]["Longitude"] = 13.78281265;
    Marker[8]["Latitude"] = 52.53051817;
    Marker[8]["Type"] = "Schule";

    Marker[9] = new Object();
    Marker[9]["Label"] = "Gesamtschule mit gymnasialer Oberstufe, Eggersdorfer Str. 91";
    Marker[9]["Longitude"] = 13.786152;
    Marker[9]["Latitude"] = 52.527298;
    Marker[9]["Type"] = "Schule";

    Marker[10] = new Object();
    Marker[10]["Label"] = "Bibliothek Eggersdorf, Am Markt 11";
    Marker[10]["Longitude"] = 13.8168;
    Marker[10]["Latitude"] = 52.538186;
    Marker[10]["Type"] = "Ist-Standort";

	for (var i = 0; i < Marker.length; i++) {
		var icon = new OpenLayers.Icon('http://daniel-bungert.de/Bibo/' + Marker[i]["Type"] + '.png',size, offset);
		position = new OpenLayers.LonLat( Marker[i]["Longitude"], Marker[i]["Latitude"] )
				  .transform(
				    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
				    map.getProjectionObject() // to Spherical Mercator Projection
				  );
		markers.addMarker(new OpenLayers.Marker(position, icon));
	}

  

</body></html>

3) mit einem Popuptext

– Code viel kompakter!


<html><body>
  <div id="Legende">
    <p><img src="http://daniel-bungert.de/Bibo/Schule.png"/> - Schulstandorte</p>
    <p><img src="http://daniel-bungert.de/Bibo/Ist-Standort.png"/> - Ist-Standort</p>
    <p><img src="http://daniel-bungert.de/Bibo/Soll-Standort.png"/> - Soll-Standort</p>
    <p><img src="http://daniel-bungert.de/Bibo/Soll-Ist-Standort.png"/> - Soll-Ist-Standort</p>
  </div>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>

    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var pois = new OpenLayers.Layer.Text( "Bibliotheksstandorte",
                    { location:"./Daten.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 
    var mitte = new OpenLayers.LonLat( 13.755147 ,52.528311 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
    var zoom=13;
 
    map.setCenter (mitte, zoom);

  </script>

</body></html>

lat	lon	title	description	icon	iconSize	iconOffset
52.528311	13.755147	Rathaus Fredersdorf	...	Soll-Standort.png	32,32	-16,-16
52.523882	13.770951	Bibliothek Petershagen	Lindenstr. 21
bestehende Bibliothek und an gleicher Stelle Vorschlag für eine neue Soll-Ist-Standort.png 32,32 -16,-16 52.52353761 13.75260863 Bibliothek Fredersdorf Waldstr. 26 Ist-Standort.png 32,32 -16,-16 52.538186 13.81680 Bibliothek Eggersdorf Am Markt 11 Ist-Standort.png 32,32 -16,-16 52.523459 13.761583 Am Kreisverkehr bereits für einen Frischemarkt verplant Soll-Standort.png 32,32 -16,-16 52.542225 13.750704 Vier-Jahreszeiten-Grundschule Posentsche Str. 60 Schule.png 32,32 -16,-16 52.520288 13.751359 Fred-Vogel-Grundschule, Oberschule Fredersdorf Tieckstr. 38/39 Schule.png 32,32 -16,-16 52.540225 13.821571 Grundschule Eggersdorf Karl-Marx-Straße 16 Schule.png 32,32 -16,-16 52.547993 13.827935 Grundschule Am Dorfanger Petershagen Mittelstraße 28 Schule.png 32,32 -16,-16 52.53051817 13.78281265 Katholische Grundschule St. Hedwig Elbestraße 48 Schule.png 32,32 -16,-16 52.527298 13.786152 Gesamtschule mit gymnasialer Oberstufe Eggersdorfer Str. 91 Schule.png 32,32 -16,-16
Advertisements
Dieser Beitrag wurde unter Uncategorized veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s