{"id":7945,"date":"2019-01-30T01:24:12","date_gmt":"2019-01-30T00:24:12","guid":{"rendered":"http:\/\/www.sigterritoires.fr\/?p=7945"},"modified":"2019-01-30T06:46:29","modified_gmt":"2019-01-30T05:46:29","slug":"how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3","status":"publish","type":"post","link":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/","title":{"rendered":"How to develop a pgrouting application in Windows (7) : OpenLayers 3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">With this final article, we get to the end of this\nseries. After setting up the Postgres \/ <a href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/starting-with-postgres-postgis\/\">Postgis<\/a> database, we\nconfigured Geoserver to assist the results of pgrouting into a WMS lux.\nAll that&rsquo;s left doing, is to &nbsp; create\nan html page with openlayers to be able to enter the starting and ending points\nand to view the calculated route. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Obviously there is a way to execute a complex application.\nBut here we will remain on something quite modest.\nWe will display an OpenStreetMap basemap, and allow the user\nto click on this map to define the starting point. When a\nsecond point is clicked, it is considered to be the desired point of arrival.\nThe page sends the request to the Geoserver WMS stream to\nretrieve a vector feature representing the calculated route by pgrouting\n&nbsp; and, finally, we will post it on the map. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">To conclude, we will add a button to reset the map, a message\nline to keep up-dated the current user, and an image to indicate the status of\nthe transfer between the server and the application. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;Text of the html page <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&rsquo;s take\na closer look into the different parts of the code. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Regarding the first, as the classic: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&lt;<\/em> <em>style<\/em> <em>&gt;<\/em> <br>\n<em>#map {<\/em> <br>\n<em>width: 100%;<\/em> <br>\n<em>height: 800px;}<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We define &nbsp;the map size\non our page: it will occupy the full width of the page and will be 800 pixels height.\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&lt;div id =<\/em>  <em>\u00ab\u00a0map<\/em>\n <em>\u00ab\u00a0&gt; &lt;\/ Div&gt;<\/em> <br>\n<em>&lt;div id =<\/em>  <em>\u00ab\u00a0desc<\/em>\n <em>&gt; Click on the map to set the starting point &#8211; click\nagain to set the end point &#8211; the route will be plotted &lt;\/ div&gt;<\/em>\n<br>\n<em>&lt;div align =<\/em>  <em>&lsquo;center<\/em>\n <em>\u00bb&gt; &lt;Img <a href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/qgis-projections-crs\/\">src<\/a> =<\/em>  <em>\u00ab\u00a00.png<\/em>\n <em>\u00bbId =<\/em>  <em>\u00ab\u00a0picture<\/em>\n <em>\u00bbWidth =<\/em>  <em>\u00bb60&Prime;\nheight =<\/em>  <em>\u00ab\u00a060\u00a0\u00bb&gt; &lt;\/ div&gt;<\/em>\n<br>\n<em>&lt;button id =<\/em>  <em>\u00bbclear<\/em>\n <em>\u00ab\u00a0&gt; Clear &lt;\/ button&gt;<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We insert the div of the map, below a line of text will be\nused as a message area, and an image to indicate the transfer status and below\na <strong>Clear<\/strong> button that will reset the page. The\nimage 0.png is an empty image. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We find the reference at the openlayers library used:\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>&lt;script src =<\/em>  <em>\u00ab\u00a0http:\/\/openlayers.org\/en\/v3.16.0\/build\/ol.js<\/em>\n <em>\u00ab\u00a0&gt; &lt;\/ Script&gt;<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">and then the creation of our map: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <em>var map = new ol.Map ({<\/em> <br>\n <em>target: &lsquo;map&rsquo;,<\/em>\n<br>\n <em>layers: [<\/em> \n<em>new ol.layer.Tile ({<\/em> <br>\n <em>source:\nnew ol.source.OSM ()})],<\/em> <br>\n <em>view: new ol.View ({<\/em>\n<br>\n <em>center: [-500000, 6172000],<\/em>\n<br>\n <em>zoom: 12}),<\/em>\n<br>\n <em>controls: ol.control.defaults\n({<\/em> <br>\n <em>attributionOptions: {<\/em>\n<br>\n <em>collapsible:\nfalse<\/em>  <em>}<\/em> \n<em>})});<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We load the OpenStreetMaps layer in our map, center the\ndisplay on the EPSG coordinates: 3857 from the center of our area of \u200b\u200binterest,\ndefine the range displayed initially with the zoom factor (12) and finally the\ndesired controls . <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The rest of the code refers to the points of departure and\narrival. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We create two features to accept these points <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\/\/ The points of departure<\/em> <em>and<\/em> <em>arrival.<\/em>\n<br>\n<em>var<\/em> <em>startPoint = new ol.Feature ();<\/em>\n<br>\n<em>var destPoint = new ol.Feature ();<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, we define a vector layer to display the points <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\/\/ The vector layer used to display start<\/em> <em>and end<\/em>\n<em>points<\/em> <em>.<\/em> <br>\n<em>var<\/em> <em>vectorLayer = new ol.layer.Vector ({<\/em>\n<br>\n<em>source: new ol.source.Vector ({<\/em> <br>\n<em>features: [startPoint, destPoint]})<\/em> <br>\n<em>});<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>map.addLayer (<\/em> <em>vectorLayer);<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We create a params variable with some fixed parameters of our\nrequest being sent to Geoserver, the name of the Geoserver layer to query and\nthe desired format to receive the result. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>var<\/em> <em>params = {<\/em> <br>\n<em>LAYERS: &lsquo;pgrouting: itinerary&rsquo;,<\/em> <br>\n<em>FORMAT: &lsquo;image \/ png&rsquo;<\/em> <br>\n<em>};<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, we release a function of coordinates transformations.\nOpenStreetMap works in spherical Pseudo-Mercator coordinates\n(EPSG : 3857 ). But our PostGis data is in\ngeographic coordinates (EPSG : 4326 ). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When we get the click on the map, the coordinates will be\n3857. We will have to transform to 4326 before sending the\nrequest to Geoserver. <br>\n\/\/\n<em>The coordinate transformation function from the EPSG: 3857<\/em>\n<br>\n<em>\/\/ towards<\/em>  <em>EPSG:\n4326<\/em> <em>.<\/em> <br>\n<em>var<\/em> <em>transform = ol.proj.getTransform (&lsquo;EPSG:\n3857&rsquo;, &lsquo;EPSG: 4326&rsquo;);<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now we set up the event listening the click in our map.\nThis\npart of the code will be activated when the user clicks on the map.\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\/\/ Set up a listening on the events of the card.<\/em>\n<br>\n<em>map.on (<\/em> <em>&lsquo;click&rsquo;, function (event) {<\/em>\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the start point is empty, it indicates that this is the\nfirst click on the map and that it is the starting point that must be filled in.\n<br>\n<em>if<\/em> <em>(startPoint.getGeometry () == null) {<\/em>\n<br>\n<em>\/\/ First click.<\/em> <br>\n<em>startPoint.setGeometry (<\/em> <em>new ol.geom.Point\n(event.coordinate));<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If, on the other hand, the start point has already been renamed,\nwe are in the presence of the second click. Therefore,\nwe will inform the destPoint: <br>\n<em>} else if (destPoint.getGeometry () == null) {<\/em>\n<br>\n<em>\/\/ Second click.<\/em> <br>\n<em>destPoint.setGeometry (<\/em> <em>new ol.geom.Point (event.coordinate));<\/em>\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And we go straight to the process of submitting the request\nto Geoserver. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We transform the coordinates of the two clicked points:\n<br>\n<em>\/\/ Transformations of coordinates from that of the map\n(EPSG: 3857)<\/em> <br>\n<em>\/\/ to that of the server (EPSG: 4326).<\/em>\n<br>\n<em>var<\/em> <em>startCoord = transform\n(startPoint.getGeometry (). getCoordinates ());<\/em> <br>\n<em>var destCoord = transform (destPoint.getGeometry ().\ngetCoordinates ());<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">and we build the string with the parameters x1, y1, x2 and y2\nneeded by our Geoserver layer (see previous article) <br>\n<em>var viewparams = [<\/em> <br>\n<em>&lsquo;x1:&rsquo; + startCoord [0], &lsquo;y1:&rsquo; + startCoord [1],<\/em>\n<br>\n<em>&lsquo;x2:&rsquo; + destCoord [0], &lsquo;y2:&rsquo; + destCoord [1]<\/em>\n<br>\n<em>];<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we have all the necessary elements to build the message\nto be sent to Geoserver. We add this message in a variable\n<strong><em>source<\/em><\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>params.viewparams =<\/em> <em>viewparams.join (<\/em> <em>&lsquo;;&rsquo;);<\/em>\n<br>\n<em>var source = new ol.source.ImageWMS ({<\/em>\n<br>\n<em>url: &lsquo;http: \/\/ localhost: 8080 \/ geoserver \/ pgrouting \/\nwms&rsquo;,<\/em> <br>\n<em>params: params<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And we send the request to Geoserver asking to add the result\nin a new Image layer (we have asked the return as a png image a little higher)\nto be displayed in our map <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>result<\/em> <em>= new ol.layer.Image ({<\/em> <br>\n<em>source: source<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since the query is not instantaneous, it is better to keep\nthe user informed of what is happening without forcing him to stay in front of\na seemingly frozen screen. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The following lines display a message text and an image\nshowing that the request is in progress, and when the transfer is complete,\nindicating whether it has been successful or not. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>source.on (<\/em> <em>&lsquo;imageloadstart&rsquo;, function () {<\/em>\n<br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>desc<\/em>  <em>\u00ab\u00a0)\n.InnerHTML =<\/em>  <em>\u00ab\u00a0loading\u2026<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>picture<\/em>  <em>\u00ab\u00a0)\n.Src =<\/em>  <em>\u00ab\u00a0tree_loading.gif<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>});<\/em> <br>\n<em>source.on (&lsquo;imageloadend&rsquo;, function () {<\/em>\n<br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>desc<\/em>  <em>\u00ab\u00a0)\n.InnerHTML =<\/em>  <em>\u00bbFinished OK!<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>picture<\/em>  <em>\u00ab\u00a0)\n.Src =<\/em>  <em>\u00ab\u00a0OK.jpg<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>});<\/em> <br>\n<em>source.on (&lsquo;imageloaderror&rsquo;, function () {<\/em>\n<br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>desc<\/em>  <em>\u00ab\u00a0)\n.InnerHTML =<\/em>  <em>\u00ab\u00a0fault!<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>picture<\/em>  <em>\u00ab\u00a0)\n.Src =<\/em>  <em>\u00ab\u00a0no.png<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>});<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We load the layer in our map: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>map.addLayer (<\/em> <em>result);<\/em> <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, we process the click with the Clear button:\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>var<\/em> <em>clearButton = document.getElementById (&lsquo;clear&rsquo;);<\/em>\n<br>\n<em>clearButton.addEventListener (&lsquo;click&rsquo;, function (event) {<\/em>\n<br>\n<em>\/\/ Reset the entities<\/em>  <em>\u00ab\u00a0<\/em>\n <em>start<\/em>  <em>\u00bbAnd\u00ab<\/em>\n <em>destination<\/em>  <em>\u00bb.<\/em>\n<br>\n<em>startPoint.setGeometry (<\/em> <em>null);<\/em>\n<br>\n<em>destPoint.setGeometry (null);<\/em> <br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>desc<\/em>  <em>\u00ab\u00a0)\n.InnerHTML =<\/em>  <em>Click on the map to set the\nstarting point &#8211; click again to set the finishing point &#8211; the route will be\ndrawn<\/em>  <em>\u00ab\u00a0;<\/em> <br>\n<em>document.getElementById ( &lsquo;<\/em> \n<em>picture<\/em>  <em>\u00ab\u00a0)\n.Src =<\/em>  <em>\u00ab\u00a00.png<\/em>\n <em>\u00ab\u00a0;<\/em> <br>\n<em>\/\/ Remove the result layer.<\/em> <br>\n<em>map.removeLayer (<\/em> <em>result);<\/em> <br>\n});\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By emptying the startPoint and destPoint entities , by adding\nthe homepage and the blank image blank and deleting the vector layer contained\nin the previous route. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can open this page in our browser and see the application operate:\n<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can open this page in our navigator and see the application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that&rsquo;s left&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sfsi_plus_gutenberg_text_before_share":"","sfsi_plus_gutenberg_show_text_before_share":"","sfsi_plus_gutenberg_icon_type":"","sfsi_plus_gutenberg_icon_alignemt":"","sfsi_plus_gutenburg_max_per_row":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1260],"tags":[],"class_list":["post-7945","post","type-post","status-publish","format-standard","hentry","category-non-classe-en"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that&#039;s left doing, is to create an html page with openlayers to be able to enter the starting and ending\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Atilio Francois\"\/>\n\t<meta name=\"google-site-verification\" content=\"ByXHZUbGNn7RNv-Xk5A-ysTZrM65VLIO2RxfSJ2nIEQ\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"fr_FR\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Blog SIG &amp; Territoires | le portail des professionnels du SIG\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG &amp; Territoires\" \/>\n\t\t<meta property=\"og:description\" content=\"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that&#039;s left doing, is to create an html page with openlayers to be able to enter the starting and ending\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-01-30T00:24:12+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-01-30T05:46:29+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/atilio.francois\/\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@SigTerritoires\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG &amp; Territoires\" \/>\n\t\t<meta name=\"twitter:description\" content=\"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that&#039;s left doing, is to create an html page with openlayers to be able to enter the starting and ending\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@SigTerritoires\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#article\",\"name\":\"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG & Territoires\",\"headline\":\"How to develop a pgrouting application in Windows (7) : OpenLayers 3\",\"author\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#articleImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f76dc2a720162999bce81d6c99b6d7b9517d6600ad7ceb5ed5268f02cefaa0ee?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Atilio Francois\"},\"datePublished\":\"2019-01-30T01:24:12+01:00\",\"dateModified\":\"2019-01-30T06:46:29+01:00\",\"inLanguage\":\"fr-FR\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#webpage\"},\"articleSection\":\"Non class\\u00e9, English\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.sigterritoires.fr\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/category\\\/non-classe-en\\\/#listItem\",\"name\":\"Non class\\u00e9\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/category\\\/non-classe-en\\\/#listItem\",\"position\":2,\"name\":\"Non class\\u00e9\",\"item\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/category\\\/non-classe-en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#listItem\",\"name\":\"How to develop a pgrouting application in Windows (7) : OpenLayers 3\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#listItem\",\"position\":3,\"name\":\"How to develop a pgrouting application in Windows (7) : OpenLayers 3\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/category\\\/non-classe-en\\\/#listItem\",\"name\":\"Non class\\u00e9\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/#person\",\"name\":\"Atilio Francois\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f76dc2a720162999bce81d6c99b6d7b9517d6600ad7ceb5ed5268f02cefaa0ee?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Atilio Francois\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/author\\\/admin\\\/\",\"name\":\"Atilio Francois\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f76dc2a720162999bce81d6c99b6d7b9517d6600ad7ceb5ed5268f02cefaa0ee?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Atilio Francois\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#webpage\",\"url\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/\",\"name\":\"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG & Territoires\",\"description\":\"With this final article, we get to the end of this series. After setting up the Postgres \\\/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that's left doing, is to create an html page with openlayers to be able to enter the starting and ending\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/en\\\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/index.php\\\/author\\\/admin\\\/#author\"},\"datePublished\":\"2019-01-30T01:24:12+01:00\",\"dateModified\":\"2019-01-30T06:46:29+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/#website\",\"url\":\"https:\\\/\\\/www.sigterritoires.fr\\\/\",\"name\":\"Blog SIG & Territoires\",\"description\":\"le portail des professionnels du SIG\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.sigterritoires.fr\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG & Territoires","description":"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that's left doing, is to create an html page with openlayers to be able to enter the starting and ending","canonical_url":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"google-site-verification":"ByXHZUbGNn7RNv-Xk5A-ysTZrM65VLIO2RxfSJ2nIEQ","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#article","name":"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG & Territoires","headline":"How to develop a pgrouting application in Windows (7) : OpenLayers 3","author":{"@id":"https:\/\/www.sigterritoires.fr\/index.php\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.sigterritoires.fr\/#person"},"image":{"@type":"ImageObject","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#articleImage","url":"https:\/\/secure.gravatar.com\/avatar\/f76dc2a720162999bce81d6c99b6d7b9517d6600ad7ceb5ed5268f02cefaa0ee?s=96&d=mm&r=g","width":96,"height":96,"caption":"Atilio Francois"},"datePublished":"2019-01-30T01:24:12+01:00","dateModified":"2019-01-30T06:46:29+01:00","inLanguage":"fr-FR","mainEntityOfPage":{"@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#webpage"},"isPartOf":{"@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#webpage"},"articleSection":"Non class\u00e9, English"},{"@type":"BreadcrumbList","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr#listItem","position":1,"name":"Home","item":"https:\/\/www.sigterritoires.fr","nextItem":{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/category\/non-classe-en\/#listItem","name":"Non class\u00e9"}},{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/category\/non-classe-en\/#listItem","position":2,"name":"Non class\u00e9","item":"https:\/\/www.sigterritoires.fr\/index.php\/en\/category\/non-classe-en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#listItem","name":"How to develop a pgrouting application in Windows (7) : OpenLayers 3"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#listItem","position":3,"name":"How to develop a pgrouting application in Windows (7) : OpenLayers 3","previousItem":{"@type":"ListItem","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/category\/non-classe-en\/#listItem","name":"Non class\u00e9"}}]},{"@type":"Person","@id":"https:\/\/www.sigterritoires.fr\/#person","name":"Atilio Francois","image":{"@type":"ImageObject","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/f76dc2a720162999bce81d6c99b6d7b9517d6600ad7ceb5ed5268f02cefaa0ee?s=96&d=mm&r=g","width":96,"height":96,"caption":"Atilio Francois"}},{"@type":"Person","@id":"https:\/\/www.sigterritoires.fr\/index.php\/author\/admin\/#author","url":"https:\/\/www.sigterritoires.fr\/index.php\/author\/admin\/","name":"Atilio Francois","image":{"@type":"ImageObject","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/f76dc2a720162999bce81d6c99b6d7b9517d6600ad7ceb5ed5268f02cefaa0ee?s=96&d=mm&r=g","width":96,"height":96,"caption":"Atilio Francois"}},{"@type":"WebPage","@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#webpage","url":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/","name":"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG & Territoires","description":"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that's left doing, is to create an html page with openlayers to be able to enter the starting and ending","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.sigterritoires.fr\/#website"},"breadcrumb":{"@id":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/#breadcrumblist"},"author":{"@id":"https:\/\/www.sigterritoires.fr\/index.php\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.sigterritoires.fr\/index.php\/author\/admin\/#author"},"datePublished":"2019-01-30T01:24:12+01:00","dateModified":"2019-01-30T06:46:29+01:00"},{"@type":"WebSite","@id":"https:\/\/www.sigterritoires.fr\/#website","url":"https:\/\/www.sigterritoires.fr\/","name":"Blog SIG & Territoires","description":"le portail des professionnels du SIG","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.sigterritoires.fr\/#person"}}]},"og:locale":"fr_FR","og:site_name":"Blog SIG &amp; Territoires | le portail des professionnels du SIG","og:type":"article","og:title":"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG &amp; Territoires","og:description":"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that's left doing, is to create an html page with openlayers to be able to enter the starting and ending","og:url":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/","article:published_time":"2019-01-30T00:24:12+00:00","article:modified_time":"2019-01-30T05:46:29+00:00","article:publisher":"https:\/\/www.facebook.com\/atilio.francois\/","twitter:card":"summary","twitter:site":"@SigTerritoires","twitter:title":"How to develop a pgrouting application in Windows (7) : OpenLayers 3 | Blog SIG &amp; Territoires","twitter:description":"With this final article, we get to the end of this series. After setting up the Postgres \/ Postgis database, we configured Geoserver to assist the results of pgrouting into a WMS lux. All that's left doing, is to create an html page with openlayers to be able to enter the starting and ending","twitter:creator":"@SigTerritoires"},"aioseo_meta_data":{"post_id":"7945","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 13:56:55","updated":"2025-06-04 16:49:53","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.sigterritoires.fr\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.sigterritoires.fr\/index.php\/en\/category\/non-classe-en\/\" title=\"Non class\u00e9\">Non class\u00e9<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow to develop a pgrouting application in Windows (7) : OpenLayers 3\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.sigterritoires.fr"},{"label":"Non class\u00e9","link":"https:\/\/www.sigterritoires.fr\/index.php\/en\/category\/non-classe-en\/"},{"label":"How to develop a pgrouting application in Windows (7) : OpenLayers 3","link":"https:\/\/www.sigterritoires.fr\/index.php\/en\/how-to-develop-a-pgrouting-application-in-windows-7-openlayers-3\/"}],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p6XU0A-249","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/7945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/comments?post=7945"}],"version-history":[{"count":0,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/posts\/7945\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/media?parent=7945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/categories?post=7945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigterritoires.fr\/index.php\/wp-json\/wp\/v2\/tags?post=7945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}