Impossible d'afficher la carte géoportail
Bonjour,
Je souhait afficher la carte géoportail sur un site internet. Malheureusement je ne trouve pas mon erreur.
Pouvez vous m'aider? voici mon code. Merci
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Entrez votre titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<h1 id="title">Entrez votre titre</h1>
<div id="viewerContainer"></div>
<script type="text/javascript">
*/**
** Property: iViewer
** {<Geoportal.InterfaceViewer>} The Geoportal API viewer interface.
**/
*iViewer= null;
*
*/**
** Function: init
** Load the map. Called when "onload" event is fired.
**/
*function init() {
**iViewer= Geoportal.load(
*****// map's div id - identifiant de la div de la carte :
*****"viewerContainer",
*****// API's keys - clefs API :
*****["g3fkg6ryrgrx16e8uwbnhtdk"],
******{
********// center in WGS84G - centre en WGS84G
********lon:2.36,
********lat:46.45000000000001
******},
*****// zoom level (0-20) - niveau de zooms (0 à 20) :
*****6,
******{
*******// various options :
********// viewer default controls options overloads :
********componentsOptions:{},
********// Geoportal's layers to load (when none, all contracts' layers are loaded) :
********layers:["GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS","AREAMANAGEMENT.ZFU:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.NIVEAUXGRIS:WMTS","UTILITYANDGOVERNMENTALSERVICES.ALL:WMTS","GEOGRAPHICALNAMES.NAMES:WMTS","LANDUSE.AGRICULTURE2010:WMTS","LANDUSE.AGRICULTURE2008:WMTS","PROTECTEDAREAS.APB:WMTS","GEOGRAPHICALGRIDSYSTEMS.PLANIGN:WMTS","LANDUSE.AGRICULTURE2007:WMTS","GEOGRAPHICALGRIDSYSTEMS.ADMINISTRATIVEUNITS:WMTS","PROTECTEDAREAS.PN:WMTS","LANDUSE.AGRICULTURE2009:WMTS","ELEVATION.SLOPES:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR.L93:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOPO.L93:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD.L93:WMTS","TRANSPORTNETWORKS.ROADS:WMTS","BUILDINGS.BUILDINGS:WMTS","ADMINISTRATIVEUNITS.BOUNDARIES:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE.L93:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE:WMTS","GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.ROUTIER:WMTS","LANDUSE.AGRICULTURE2012:WMTS","LANDUSE.AGRICULTURE2011:WMTS"],
********// Geoportal's layers options :
********layersOptions:{"GEOGRAPHICALGRIDSYSTEMS.MAPS:WMTS":{"opacity":0.3,"visibility":true},"AREAMANAGEMENT.ZFU:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.NIVEAUXGRIS:WMTS":{"opacity":1,"visibility":false},"UTILITYANDGOVERNMENTALSERVICES.ALL:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALNAMES.NAMES:WMTS":{"opacity":1,"visibility":false},"LANDUSE.AGRICULTURE2010:WMTS":{"opacity":1,"visibility":false},"LANDUSE.AGRICULTURE2008:WMTS":{"opacity":1,"visibility":false},"PROTECTEDAREAS.APB:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.PLANIGN:WMTS":{"opacity":1,"visibility":false},"LANDUSE.AGRICULTURE2007:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.ADMINISTRATIVEUNITS:WMTS":{"opacity":1,"visibility":false},"PROTECTEDAREAS.PN:WMTS":{"opacity":1,"visibility":false},"LANDUSE.AGRICULTURE2009:WMTS":{"opacity":1,"visibility":false},"ELEVATION.SLOPES:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR.L93:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOPO.L93:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD.L93:WMTS":{"opacity":1,"visibility":false},"TRANSPORTNETWORKS.ROADS:WMTS":{"opacity":1,"visibility":false},"BUILDINGS.BUILDINGS:WMTS":{"opacity":1,"visibility":false},"ADMINISTRATIVEUNITS.BOUNDARIES:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE.L93:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE:WMTS":{"opacity":1,"visibility":false},"GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.ROUTIER:WMTS":{"opacity":1,"visibility":false},"LANDUSE.AGRICULTURE2012:WMTS":{"opacity":1,"visibility":false},"LANDUSE.AGRICULTURE2011:WMTS":{"opacity":1,"visibility":false}},
********overlays:{},
*
**// callback to use before returning (after centering) :
**onView:function() {viewer=iViewer.getViewer();
*
******//Récupération de la barre d'outils
******var tbx= viewer.getMap().getControlsByClass("Geoportal.Control.ToolBox")[0];
******var panel= new Geoportal.Control.Panel({
******div:OpenLayers.Util.getElement(tbx.id+"_search")
**});
*
**viewer.getMap().addControls([panel]);
*
******//Ajout du contrôle d'impression
******var nv= viewer.getMap().getControlsByClass("Geoportal.Control.NavToolbar")[0];
******nv.addControls([new Geoportal.Control.PrintMap()]);
*
******//Ajout de la barre d'outils de mesures
******var measurebar= new Geoportal.Control.MeasureToolbar({
********div: OpenLayers.Util.getElement(tbx.id+"_measure"),
********displaySystemviewer.getMap().getProjection().getProjName()=="longlat"?"geographic":"metric"),
********targetElement: OpenLayers.Util.getElement(tbx.id+"_meares")
******});
**
**viewer.getMap().addControl(measurebar);
*
******//Ajout de la LayerToolbar
******var tOpts= {div: OpenLayers.Util.getElement(tbx.id+"_addlyr")};
**********tOpts= OpenLayers.Util.extend(tOpts,{
************addVectorLayerOptions:{
**************supportedClasses:[
****************"OpenLayers.Format.KML",
****************"Geoportal.Format.GPX",
****************"OpenLayers.Format.OSM",
****************"OpenLayers.Layer.GeoRSS",
****************"OpenLayers.Layer.WFS"
**************],
**************styleMapTemplates:{
****************"OpenLayers.Layer.GeoRSS":new OpenLayers.StyleMap(
*****************new OpenLayers.Style(
*******************OpenLayers.Util.applyDefaults({
*********************"graphic":true,
*********************"externalGraphic":Geoportal.Util.getImagesLocation()+"xy-target.gif",
*********************"graphicOpacity":1.0,
*********************"graphicWidth":25,
*********************"graphicHeight":25,
*********************"graphicXOffset":-12.5,
*********************"graphicYOffset":-12.5
*******************},OpenLayers.Feature.Vector.style["default"])
*****************)
****************)
**************},
**************layerVectorOptions:{
****************global:{
****************}
**************}
************},
*
************addImageLayerOptions:{
**************layerImageOptions:{
****************singleTile:false
**************}
************}
*
******});
******var LayerToolbar= new Geoportal.Control.LayerToolbar(tOpts);
******viewer.getMap().addControl(LayerToolbar);
*
******//Accès au GéoCatalogue
******var CSW= new Geoportal.Control.CSW(
********OpenLayers.Util.extend(
************{
*************title:"gpControlCSW.title"
************},
************{
*************cswUrl:"http://www.geocatalogue.fr/api-public/servicesRest?"
************}
**********))
******panel.addControls([CSW]);
*
******//Ajout du contrôle de recherche par noms de lieux
******var GeoNames= new Geoportal.Control.LocationUtilityService.GeoNames(
********new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
************"PositionOfInterest:OPENLS;Geocode",//layer name
************{
*************maximumResponses:100,
**************formatOptions: {
**************}
************}
********),{
************drawLocation:true,
************setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
************autoCompleteOptions: {}
**********}
******);
******panel.addControls([GeoNames]);
*
******//Ajout du contrôle de recherche par adresses
******var Geocode= new Geoportal.Control.LocationUtilityService.Geocode(
********new Geoportal.Layer.OpenLS.Core.LocationUtilityService(
************"StreetAddress:OPENLS;Geocode",//layer name
**************{
****************maximumResponses:100,
****************formatOptions: {
****************}
**************}
***********),{
****************drawLocation:true,
****************setZoom: Geoportal.Control.LocationUtilityService.GeoNames.setZoomForBDNyme,
****************autoCompleteOptions: {}
**************}
******);
******panel.addControls([Geocode]);
**
****************},
*****// class of viewer to use :
*****viewerClass:"Geoportal.Viewer.Default"
************}
********);
****}
*
*
****window.onload= init;
</script>
<script type="text/javascript" charset="utf-8" src="http://api.ign.fr/geoportail/api/js/2.1.0/GeoportalExtended.js">
</script>
</body>
</html>
CSS :
body {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
div#viewerContainer {
width: 100%;
height: 955px
height: -webkit-calc(100% - 64px);
height: calc(100% - 64px);
}
h1 {
font-size:25px;
font-weight:bold;
color : red;
font-family: sans-serif;
}
Répondre avec citation
?
Partager