Intégration Openstreetmap

ouro · août 2012

Bonjour,

Je cherche à intégrer une mini-carte OSM dans l'un de mes articles ; j'ai trouvé cet exemple qui fonctionne bien sur une page html seule, mais je ne parviens pas à adapter le code pour le mettre dans un article.

Merci d'avance

Jerry Wham · août 2012

Utilises-tu un éditeur wysiwyg et si oui lequel ? Je pose la question car les balises peuvent être modifiées.
Essaies, si tu peux de passer par une page statique pour ce genre de besoin.

Stéphane · août 2012

Bonjour

Essaye en collant dans une page statique le code suivant. Il reprend celui de ton lien, sans les balises <html><head><body>, mais avec le contenu de <head> et <body> uniquement + l'appel de la fonction javascript init() en fin de page

ouro · août 2012

J'utilise plxEditor - Version 1.2 (20/10/2011), je suis passé en mode html pour coller le code.

J'ai essayé ceci dans une page statique :

	<title>Simple OSM GPX Track</title>
	<!-- bring in the OpenLayers javascript library
	 (here we bring it from the remote site, but you could
	 easily serve up this javascript yourself) -->
 	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
 		 to date with any necessary changes -->
	 	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

 	 	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=45.19788
		var lon=5.72827
		var zoom=17
		var map; //complex object of type OpenLayers.Map
		
		function init() {
		map = new OpenLayers.Map ("map", {
		controls:[
		new OpenLayers.Control.Navigation(),
		new OpenLayers.Control.PanZoomBar(),
		new OpenLayers.Control.LayerSwitcher(),
		new OpenLayers.Control.Attribution()],
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
		maxResolution: 156543.0399,
		numZoomLevels: 19,
		units: 'm',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326")
		} );
					 
		// Define the map layer
		// Here we use a predefined layer that will be kept up to date with URL changes
		layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
		map.addLayer(layerMapnik);
		layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
		map.addLayer(layerCycleMap);
		layerMarkers = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(layerMarkers);
		
		// Add the Layer with the GPX Track
		var lgpx = new OpenLayers.Layer.Vector("Descente de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-28-44.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx);

		// Add the Layer with the GPX Track
		var lgpx2 = new OpenLayers.Layer.Vector("Montée de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-01-07.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx2);

		var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		map.setCenter(lonLat, zoom);
					 
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
	//	layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
		</script>
									 
		<div style="width:90%; height:90%" id="map" onload="init();>aaa</div>

Par contre à l'enregistrement la dernière div est supprimée.
En revanche l'exemple minimal fonctionne dans un article :

<title>OpenLayers Simplest Example</title>
<div id="demoMap" style="height:250px"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
</script>

mais pas l'exemple suivant.

Stéphane · août 2012

Ho ben j'ai oublié de te mettre le code dont je parle dans mon précedent post.
Désolé

	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=47.496792
		var lon=7.571726
		var zoom=13
 
		var map; //complex object of type OpenLayers.Map
 
		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );
 
			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);
 
			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Lakeside cycle ride", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "around_lake.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);
 
			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);
 
			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div style="width:90%; height:90%" id="map"></div>
	<script type="text/javascript">init()</script>

ouro · août 2012

pas plus de succès ainsi

est-il possible de feinter en appelant la page qui fonctionne au sein d'un article ?

Jerry Wham · août 2012

Dans la div, il y a une erreur de syntaxe. Tu ne fermes pas les guillemets de l'onload :

<div style="width:90%; height:90%" id="map" onload="init();>aaa</div>

Jerry Wham · août 2012

Il peut également y avoir une incompatibilité des css (entre celui de ton thème et celui donné dans l'exemple).
Vérifie si le bloc n'est pas écrasé en mettant une bordure (border:1px solid red;) à la div recevant la carte. Si tu ne vois qu'un trait, c'est que la hauteur n'est pas prise en compte. Il faut alors la mettre en unité absolue (en pixel) pour forcer le bloc à avoir une hauteur fixe.

Le code suivant fonctionne (il met 3 plombes à charger mais il fonctionne).

<style type="text/css">
      #basicMap {
      	  position:relative;
          width: 100%;
          height: 300px;
          margin: 0;
      }
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik         = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position       = new OpenLayers.LonLat(13.41,52.52).transform( fromProjection, toProjection);
        var zoom           = 15; 
 
        map.addLayer(mapnik);
        map.setCenter(position, zoom );
      }
    </script>
	<!-- define a DIV into which the map will appear. Make it take up the whole window -->
	<div id="basicMap"></div>

J'ai modifié le fichier header de mon thème en ajoutant au niveau de la balise body le code suivant :

<body<?php if ($plxMotor->mode == 'static') echo ' onload="init();"';?>>

On pourrait affiner la condition pour que le script ne s'affiche que lors de l'appel de la bonne page, mais je n'ai pas trop chercher. Je te laisse le soin de le faire

.

Si tu es sous Firefox et que ça ne s'affiche toujours pas, essaie de cliquer sur Maj+crtl+s (ou Maj+cmd+s sur mac) pour afficher la page sans css. Si le script fonctionne, la carte s'affiche. Si c'est le cas, c'est un problème de css.

Jerry Wham · août 2012

C'est bien un problème de css. Avec ce code, la carte s'affiche parfaitement, sous le texte "aaa" contenu dans la div (un endroit entre chambery, grenoble et lyon) :

<style type="text/css">
      #map {
      	  position:relative;
          width: 100%;
          height: 300px;
          margin: 0;
      }
    </style>
    <!-- bring in the OpenLayers javascript library
	 (here we bring it from the remote site, but you could
	 easily serve up this javascript yourself) -->
 	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
 		 to date with any necessary changes -->
	 	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

 	 	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=45.19788
		var lon=5.72827
		var zoom=17
		var map; //complex object of type OpenLayers.Map
		
		function init() {
		map = new OpenLayers.Map ("map", {
		controls:[
		new OpenLayers.Control.Navigation(),
		new OpenLayers.Control.PanZoomBar(),
		new OpenLayers.Control.LayerSwitcher(),
		new OpenLayers.Control.Attribution()],
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
		maxResolution: 156543.0399,
		numZoomLevels: 19,
		units: 'm',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326")
		} );
					 
		// Define the map layer
		// Here we use a predefined layer that will be kept up to date with URL changes
		layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
		map.addLayer(layerMapnik);
		layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
		map.addLayer(layerCycleMap);
		layerMarkers = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(layerMarkers);
		
		// Add the Layer with the GPX Track
		var lgpx = new OpenLayers.Layer.Vector("Descente de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-28-44.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx);

		// Add the Layer with the GPX Track
		var lgpx2 = new OpenLayers.Layer.Vector("Montée de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-01-07.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx2);

		var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		map.setCenter(lonLat, zoom);
					 
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
	//	layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
		</script>
									 
		<div id="map">aaa</div>

Il faut bien sûr également modifier le header comme expliqué précédemment.

Pour plus de faciliter de mise en page, tu peux utiliser un bloc contenair ainsi :

<style type="text/css">
      #contenair {
          width: 100%;
          height: 800px;
      }
      #map {
      	  position:relative;
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <!-- bring in the OpenLayers javascript library
	 (here we bring it from the remote site, but you could
	 easily serve up this javascript yourself) -->
 	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
 		 to date with any necessary changes -->
	 	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

 	 	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=45.19788
		var lon=5.72827
		var zoom=17
		var map; //complex object of type OpenLayers.Map
		
		function init() {
		map = new OpenLayers.Map ("map", {
		controls:[
		new OpenLayers.Control.Navigation(),
		new OpenLayers.Control.PanZoomBar(),
		new OpenLayers.Control.LayerSwitcher(),
		new OpenLayers.Control.Attribution()],
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
		maxResolution: 156543.0399,
		numZoomLevels: 19,
		units: 'm',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326")
		} );
					 
		// Define the map layer
		// Here we use a predefined layer that will be kept up to date with URL changes
		layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
		map.addLayer(layerMapnik);
		layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
		map.addLayer(layerCycleMap);
		layerMarkers = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(layerMarkers);
		
		// Add the Layer with the GPX Track
		var lgpx = new OpenLayers.Layer.Vector("Descente de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-28-44.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx);

		// Add the Layer with the GPX Track
		var lgpx2 = new OpenLayers.Layer.Vector("Montée de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-01-07.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx2);

		var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		map.setCenter(lonLat, zoom);
					 
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
	//	layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
		</script>
		<div id="contenair">							 
		<div id="map">aaa</div>
		</div>

ouro · août 2012

oui, c'est au bon endroit

J'utilise le thème dark and blue, voici mon header.php après modification :

<?php if(!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title><?php $plxShow->pageTitle(); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php $plxShow->charset(); ?>" />
	<link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/style.css" media="screen" />
	<?php $plxShow->templateCss() ?>
	<link rel="alternate" type="application/atom+xml" title="Atom articles" href="<?php $plxShow->urlRewrite('feed.php?atom') ?>" />
	<link rel="alternate" type="application/rss+xml" title="Rss articles" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom commentaires" href="<?php $plxShow->urlRewrite('feed.php?atom/commentaires') ?>" />
	<link rel="alternate" type="application/rss+xml" title="Rss commentaires" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
</head>
<body>
	<body<?php if ($plxMotor->mode == 'static') echo ' onload="init();"';?>>
	<div id="wrapper">
		<div id="page">
			<div id="inner">
				<div id="top">
					<div id="menu">
						<ul>
			<?php $plxShow->staticList('Accueil','<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
			<?php $plxShow->pageBlog('<li class="#page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
                                                </ul>
					<div class="clear"></div>
					</div>
					<div id="header">
						<h1><?php $plxShow->mainTitle('link'); ?></h1>
						<p><?php $plxShow->subTitle(); ?></p>
					</div>
					<div class="clear"></div>
				</div>

J'ai essayé tes différentes propositions, en particulier la dernière, la place est bien réservée mais la carte n'apparait pas, y compris quand la page est affichée sans css.

Jerry Wham · août 2012

Tu as deux fois la balise body.

As-tu essayé avec Maj+crtl+s et Firefox ? La carte n'apparait pas forcément d'emblée mais tu peux l'apercevoir en scrollant la page.

ouro · août 2012

J'ai modifié à nouveau le fichier header :

<?php if(!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title><?php $plxShow->pageTitle(); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=<?php $plxShow->charset(); ?>" />
	<link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/style.css" media="screen" />
	<?php $plxShow->templateCss() ?>
	<link rel="alternate" type="application/atom+xml" title="Atom articles" href="<?php $plxShow->urlRewrite('feed.php?atom') ?>" />
	<link rel="alternate" type="application/rss+xml" title="Rss articles" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom commentaires" href="<?php $plxShow->urlRewrite('feed.php?atom/commentaires') ?>" />
	<link rel="alternate" type="application/rss+xml" title="Rss commentaires" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
</head>
<body <?php if ($plxMotor->mode == 'static') echo ' onload="init();"';?>>
	
	<div id="wrapper">
		<div id="page">
			<div id="inner">
				<div id="top">
					<div id="menu">
						<ul>
			<?php $plxShow->staticList('Accueil','<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
			<?php $plxShow->pageBlog('<li class="#page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
                                                </ul>
					<div class="clear"></div>
					</div>
					<div id="header">
						<h1><?php $plxShow->mainTitle('link'); ?></h1>
						<p><?php $plxShow->subTitle(); ?></p>
					</div>
					<div class="clear"></div>
				</div>

et le code de l'article :

<style type="text/css">
      #contenair {
          width: 100%;
          height: 800px;
      }
      #map {
      	  position:relative;
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <!-- bring in the OpenLayers javascript library
	 (here we bring it from the remote site, but you could
	 easily serve up this javascript yourself) -->
 	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
		<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
 		 to date with any necessary changes -->
	 	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

 	 	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=45.19788
		var lon=5.72827
		var zoom=17
		var map; //complex object of type OpenLayers.Map
		
		function init() {
		map = new OpenLayers.Map ("map", {
		controls:[
		new OpenLayers.Control.Navigation(),
		new OpenLayers.Control.PanZoomBar(),
		new OpenLayers.Control.LayerSwitcher(),
		new OpenLayers.Control.Attribution()],
		maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
		maxResolution: 156543.0399,
		numZoomLevels: 19,
		units: 'm',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326")
		} );
					 
		// Define the map layer
		// Here we use a predefined layer that will be kept up to date with URL changes
		layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
		map.addLayer(layerMapnik);
		layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
		map.addLayer(layerCycleMap);
		layerMarkers = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(layerMarkers);
		
		// Add the Layer with the GPX Track
		var lgpx = new OpenLayers.Layer.Vector("Descente de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-28-44.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx);

		// Add the Layer with the GPX Track
		var lgpx2 = new OpenLayers.Layer.Vector("Montée de la Bastille", {
		strategies: [new OpenLayers.Strategy.Fixed()],
		protocol: new OpenLayers.Protocol.HTTP({
		url: "2012-08-15_10-01-07.gpx",
		format: new OpenLayers.Format.GPX()
		}),
		style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},
		projection: new OpenLayers.Projection("EPSG:4326")
		});
		map.addLayer(lgpx2);

		var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
		map.setCenter(lonLat, zoom);
					 
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
	//	layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
		</script>
		<div id="contenair">							 
		<div id="map">aaa</div>
		</div>

Je suis sous firefox, Maj+Ctrl+S entre en conflit avec un raccourci de noscript, je suis passé par affichage -> style de la page -> aucun style

Stéphane · août 2012

Bonjour
Alors on va reprendre depuis le début comme je vois des bonnes et des mauvaises choses.
Ce qui va suivre fonctionne: testé avec le thème par défaut de PluXml et une installation de la 5.1.6

1) créer à la racine de votre pluxml, un fichier around_lake.gpx et coller dedans le code suivant

<?xml version="1.0" encoding="UTF-8"?>
<gpx version="1.0">
	<name>Example gpx</name>
	<wpt lat="46.57638889" lon="8.89263889">
		<ele>2372</ele>
		<name>LAGORETICO</name>
	</wpt>
	<trk><name>Example gpx</name><number>1</number><trkseg>
		<trkpt lat="46.57608333" lon="8.89241667"><ele>2376</ele><time>2007-10-14T10:09:57Z</time></trkpt>
		<trkpt lat="46.57619444" lon="8.89252778"><ele>2375</ele><time>2007-10-14T10:10:52Z</time></trkpt>
		<trkpt lat="46.57641667" lon="8.89266667"><ele>2372</ele><time>2007-10-14T10:12:39Z</time></trkpt>
		<trkpt lat="46.57650000" lon="8.89280556"><ele>2373</ele><time>2007-10-14T10:13:12Z</time></trkpt>
		<trkpt lat="46.57638889" lon="8.89302778"><ele>2374</ele><time>2007-10-14T10:13:20Z</time></trkpt>
		<trkpt lat="46.57652778" lon="8.89322222"><ele>2375</ele><time>2007-10-14T10:13:48Z</time></trkpt>
		<trkpt lat="46.57661111" lon="8.89344444"><ele>2376</ele><time>2007-10-14T10:14:08Z</time></trkpt>
	</trkseg></trk>
</gpx>

2) dans le dossier de votre theme, dupliquer le fichier static.php et nommer le static-osm.php, afin de créer un template de page statique qui sera utilisé lors de l'affichage d'une seule page statique (rappel: la structure du nom d'un fichier template est static-xxxxx.php, article-xxxxx.php, etc...)

3) coller dans le fichier static-osm.php le code suivant

<?php include(dirname(__FILE__).'/header.php'); ?>

	<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=47.496792
		var lon=7.571726
		var zoom=13
 
		var map; //complex object of type OpenLayers.Map
 
		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );
 
			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);
 
			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Lakeside cycle ride", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "around_lake.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);
 
			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);
 
			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>


	<div id="section">

		<div id="article">

				<h2><?php $plxShow->staticTitle(); ?></h2>
				<div class="static-content"><?php $plxShow->staticContent(); ?></div>
				
				<div id="mapContainer">
					<div id="map"></div>
				</div>
		</div>

		<?php include(dirname(__FILE__).'/sidebar.php'); ?>

	</div>

<script type="text/javascript">init();</script>
<?php include(dirname(__FILE__).'/footer.php'); ?>

4) Aller dans l'administration, créer une nouvelle page statique. Cliquer sur le lien "Editer" (colonne action) de la page statique.

5) Dans le déroulant "Template", sélectionner "static-osm.php". Sauvegarder

6) Coté visiteur, accèder à la page statique

Ici en utilisant un template, le code pour visualiser la carte n'est chargé que lors de la visualisation de la page statique.

On peut ajouter ou modifier le contenu de la page, tout en préservant l'affichage de la carte.
Pour faire des modification sur l'affichage proprement dit de la carte il faut le faire dans le fichier static-osm.php qui est dans le dossier du thème utilisé.

L'affichage est valide W3C, fonctionne avec la réécriture d'url et la compression gzip

La partie de code qui affiche la carte dans le fichier static-osm.php est


				<div id="mapContainer">
					<div id="map"></div>
				</div>

Il utilise 2 classes css: mapContainer et map.
Ces classes sont à utiliser dans un fichier static-osm.css et en mettant dedans le code nécessaire

#mapContainer {
	margin: 20px 20px 0 20px;
	height:300px;
}

#map {
	width:100%;
	height:300px;
	
}

Rappel: lorsqu'un fichier template (static-osm.php) est utilisé, si un fichier portant le même nom mais avec l'extension css existe, il est automatiquement chargé par PluXml au moment de l'affichage de la page statique. D'où la création et l'utilisation du fichier static-osm.css

7) il ne reste plus qu'à faire les modifs voulues au niveau de la carte (coordonnées) et la mise en page (fichier css)

ouro · août 2012

Merci !

Par contre avec le thème dark-blue sur une page statique avec le template static-osm le menu latéral est renvoyé en dessous. J'ai essayé de réduire la largeur de la carte par la css, sans succès.

J'abuse de votre patience mais y-a-t'il un moyen d'adapter la même chose en articles ? Vu que c'est pour des trajets de randonnée, je trouve plus pratique de faire un article par rando plutôt qu'une page statique.

encore merci, ouro

Jerry Wham · août 2012

Il faut faire comme te l'a décrit Stéphane, mais avec des articles.
1) Tu crées un fichier article-osm.php dans ton dossier de thème avec le code source d'un article normal.

2) Tu crées un fichier article-osm.css également dans ce dossier et tu y colles le code suivant :

#mapContainer {
	margin: 20px 20px 0 20px;
	height:300px;
}

#map {
	width:100%;
	height:300px;
	
}

3) Dans le fichier header de ton thème, avant la balise </body>, tu places le code suivant :

<?php $plxShow->templateCss(); ?>

Cela te permettra d'utiliser le css spécifiquement pour un template donné.

4) Dans un article, si tu utilises ckeditor, clique sur le bouton "Source" et colle le code suivant :

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script><!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes --><script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script><script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=47.496792
		var lon=7.571726
		var zoom=13
 
		var map; //complex object of type OpenLayers.Map
 
		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.Attribution()],
				maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );
 
			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);
 
			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.Vector("Lakeside cycle ride", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "<?php echo PLX_ROOT;?>data/cartes/around_lake.gpx",
					format: new OpenLayers.Format.GPX()
				}),
				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);
 
			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);
 
			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>
<div id="mapContainer">
	<div id="map">
		&nbsp;</div>
</div>
<script type="text/javascript">init();</script>

5) Utilise le template précédemment créé article-osm.php pour cet article. Tu peux le sélectionner dans la liste déroulante en bas à gauche de la page d'édition de ton article.

6) Si tu dois mettre plusieurs cartes avec différentes coordonnées, il vaut mieux créer différents fichiers gpx. Dans mon exemple, je les ai mis dans le dossier data/cartes/ qu'il faudra bien entendu créer. Dedans, il faudra placer le fichier around_lake.gpx (pour le code, voir post précédents) et les futurs autres.

ouro · août 2012

Parfait, merci beaucoup à tous les deux !

[Utilisateur supprimé] · août 2012

Dés que l'on place le doigt dans la gestion des cartes type OpenLayer, ign ou autres Google hybrides etc, ....
on y prend gout et l'on devient exigeant sur le rendu.

Aussi je ne peux que te conseiller de commencer par créer un dossier OpenLayers qui contiendra les archives de scripts et CSS propres à OpenLayers. OpenStreetMap étant un dérivé de OL.

Des lors que tu auras mis au point le format du rendu de carte que tu désires, il te suffit d'intégrer tes cartes
par un simple iframe dans tes articles pluxml. Iframe dont tu ajusteras les dimensions selon le template pluxml que tu auras choisi.

<iframe   src="http://monpluxml.com/OpenLayers/gpx.html" name="selfbox" hspace="1" frameborder="0" width="650px" height="550px" >

Avantages:

1- coté pluxml juste le bout de code à coller dans ton article - bien en entendu sans passer par l'éditeur.

2- coté édition de cartes, tu n'auras besoin que de préciser l'url de ton fichier.gpx et les coordonnées de centrage de ta carte pour chaque rando dans ton fichier html...... :-)

exemples de carte html qui intègrent du google street de l'ign et autres OpenStreetMap:

http://pofableau.com/Cartes_OL/a_tous_circuits/carte_generale_ol.html

Détail, OpenStreetMap n'est pas l'idéal pour une restitution topographique terrain.

En résumé pluxml te permettra d'intégrer toutes les cartes que tu souhaites selon différentes approches
le plus dur étant de maitriser les codes sources d'OpenLayers ou de l'API de l'IGN ......

Bon courage.

danielsan · août 2012

ouyouyouille ça me bote grave cette affaire là ...
souhaitant partager mes points sublimes, les cartes IGN sont plus magiques que celles de Google.
Merci du partage

Intégration Openstreetmap

Réponses