<div dir="ltr">hello everyone ; recently l tried to use openlayers to create my own map with mapserver. my program work well if try just to display a open layer map in a browser <b>but if l try to add the interaction tools like modify, snap , draw</b> the program don't work. this is my source code bellow if someone can hem me with the interaction library of openlayer.<div><div style="color:rgb(212,212,212);background-color:rgb(30,30,30);font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:19px;white-space:pre"><div><span style="color:rgb(128,128,128)"><!</span><span style="color:rgb(86,156,214)">DOCTYPE</span> <span style="color:rgb(156,220,254)">html</span><span style="color:rgb(128,128,128)">></span></div><div><span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">html</span> <span style="color:rgb(156,220,254)">lang</span>=<span style="color:rgb(206,145,120)">"en"</span><span style="color:rgb(128,128,128)">></span></div><div>  <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">head</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">meta</span> <span style="color:rgb(156,220,254)">charset</span>=<span style="color:rgb(206,145,120)">"utf-8"</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">link</span> <span style="color:rgb(156,220,254)">rel</span>=<span style="color:rgb(206,145,120)">"stylesheet"</span> <span style="color:rgb(156,220,254)">href</span>=<span style="color:rgb(206,145,120)">"<a href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css">https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/css/ol.css</a>"</span> <span style="color:rgb(156,220,254)">type</span>=<span style="color:rgb(206,145,120)">"text/css"</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">style</span><span style="color:rgb(128,128,128)">></span></div><div>      <span style="color:rgb(215,186,125)">.map</span> {</div><div>        <span style="color:rgb(156,220,254)">height</span>: <span style="color:rgb(181,206,168)">400px</span>;</div><div>        <span style="color:rgb(156,220,254)">width</span>: <span style="color:rgb(181,206,168)">100%</span>;</div><div>      }</div><div>    <span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">style</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">script</span> <span style="color:rgb(156,220,254)">src</span>=<span style="color:rgb(206,145,120)">"<a href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js">https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.8.1/build/ol.js</a>"</span><span style="color:rgb(128,128,128)">></</span><span style="color:rgb(86,156,214)">script</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">script</span> <span style="color:rgb(156,220,254)">src</span>=<span style="color:rgb(206,145,120)">"<a href="https://unpkg.com/elm-pep">https://unpkg.com/elm-pep</a>"</span><span style="color:rgb(128,128,128)">></</span><span style="color:rgb(86,156,214)">script</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">title</span><span style="color:rgb(128,128,128)">></span>OpenLayers example<span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">title</span><span style="color:rgb(128,128,128)">></span></div><div>  <span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">head</span><span style="color:rgb(128,128,128)">></span></div><div>  <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">body</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">h2</span><span style="color:rgb(128,128,128)">></span>My bah<span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">h2</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">div</span> <span style="color:rgb(156,220,254)">id</span>=<span style="color:rgb(206,145,120)">"map"</span> <span style="color:rgb(156,220,254)">class</span>=<span style="color:rgb(206,145,120)">"map"</span><span style="color:rgb(128,128,128)">></</span><span style="color:rgb(86,156,214)">div</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">div</span> <span style="color:rgb(156,220,254)">id</span>=<span style="color:rgb(206,145,120)">"mouse-position"</span><span style="color:rgb(128,128,128)">></</span><span style="color:rgb(86,156,214)">div</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">div</span> <span style="color:rgb(156,220,254)">id</span>=<span style="color:rgb(206,145,120)">"raster-button"</span><span style="color:rgb(128,128,128)">></span></div><div>      <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">button</span> <span style="color:rgb(156,220,254)">onclick</span>= <span style="color:rgb(206,145,120)">"</span><span style="color:rgb(220,220,170)">raster_switch</span><span style="color:rgb(206,145,120)">()</span><span style="color:rgb(206,145,120)">"</span><span style="color:rgb(128,128,128)">></span>Raster<span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">button</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">div</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">div</span> <span style="color:rgb(156,220,254)">id</span>=<span style="color:rgb(206,145,120)">"dessin-button"</span><span style="color:rgb(128,128,128)">></span></div><div>      <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">button</span> <span style="color:rgb(156,220,254)">onclick</span>=<span style="color:rgb(206,145,120)">"</span><span style="color:rgb(220,220,170)">add_creer</span><span style="color:rgb(206,145,120)">()</span><span style="color:rgb(206,145,120)">"</span><span style="color:rgb(128,128,128)">></span>Dessiner<span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">button</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">div</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">div</span> <span style="color:rgb(156,220,254)">id</span>=<span style="color:rgb(206,145,120)">"stop-button"</span><span style="color:rgb(128,128,128)">></span></div><div>      <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">button</span> <span style="color:rgb(156,220,254)">onclick</span>=<span style="color:rgb(206,145,120)">"</span><span style="color:rgb(220,220,170)">stop</span><span style="color:rgb(206,145,120)">()</span><span style="color:rgb(206,145,120)">"</span><span style="color:rgb(128,128,128)">></span>Stop<span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">button</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">div</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">div</span> <span style="color:rgb(156,220,254)">id</span>=<span style="color:rgb(206,145,120)">"modify-button"</span><span style="color:rgb(128,128,128)">></span></div><div>      <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">button</span> <span style="color:rgb(156,220,254)">onclick</span>=<span style="color:rgb(206,145,120)">"</span><span style="color:rgb(220,220,170)">add_modify</span><span style="color:rgb(206,145,120)">()</span><span style="color:rgb(206,145,120)">"</span><span style="color:rgb(128,128,128)">></span>Modifier<span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">button</span><span style="color:rgb(128,128,128)">></span></div><div>    <span style="color:rgb(128,128,128)"></</span><span style="color:rgb(86,156,214)">div</span><span style="color:rgb(128,128,128)">></span>    </div><div>    <span style="color:rgb(128,128,128)"><</span><span style="color:rgb(86,156,214)">script</span> <span style="color:rgb(156,220,254)">type</span>=<span style="color:rgb(206,145,120)">"text/javascript"</span><span style="color:rgb(128,128,128)">></span></div><div>      <span style="color:rgb(86,156,214)">var</span> <span style="color:rgb(156,220,254)">raster</span> = <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">layer</span>.<span style="color:rgb(220,220,170)">Tile</span>({</div><div>           <span style="color:rgb(156,220,254)">source:</span> <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">source</span>.<span style="color:rgb(220,220,170)">OSM</span>()</div><div>      });</div><div>      <span style="color:rgb(86,156,214)">var</span> <span style="color:rgb(156,220,254)">vector</span> = <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">layer</span>.<span style="color:rgb(220,220,170)">Vector</span>({</div><div>        <span style="color:rgb(156,220,254)">source:</span> <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">source</span>.<span style="color:rgb(220,220,170)">Vector</span>({</div><div>        <span style="color:rgb(156,220,254)">url:</span> <span style="color:rgb(206,145,120)">'<a href="https://raw.githubusercontent.com/openlayers/openlayers/main/examples/data/geojson/countries.geojson">https://raw.githubusercontent.com/openlayers/openlayers/main/examples/data/geojson/countries.geojson</a>'</span>,</div><div>        <span style="color:rgb(156,220,254)">format:</span> <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">format</span>.<span style="color:rgb(220,220,170)">GeoJSON</span>(),</div><div>         })</div><div>      });  </div><div>      <span style="color:rgb(86,156,214)">var</span> <span style="color:rgb(156,220,254)">map</span> = <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(220,220,170)">Map</span>({</div><div>        <span style="color:rgb(156,220,254)">controls:</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">control</span>.<span style="color:rgb(220,220,170)">defaults</span>().<span style="color:rgb(220,220,170)">extend</span>([</div><div>          <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">control</span>.<span style="color:rgb(220,220,170)">MousePosition</span>({</div><div>            <span style="color:rgb(156,220,254)">coordinateFormat:</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">coordinate</span>.<span style="color:rgb(220,220,170)">createStringXY</span>(<span style="color:rgb(181,206,168)">4</span>),</div><div>            <span style="color:rgb(156,220,254)">projection:</span> <span style="color:rgb(206,145,120)">'EPSG:4326'</span>,</div><div>            <span style="color:rgb(156,220,254)">className:</span> <span style="color:rgb(206,145,120)">'custom-mouse-position'</span>,</div><div>            <span style="color:rgb(156,220,254)">target:</span> <span style="color:rgb(156,220,254)">document</span>.<span style="color:rgb(220,220,170)">getElementById</span>(<span style="color:rgb(206,145,120)">'mouse-position'</span>),</div><div>            <span style="color:rgb(156,220,254)">undefinedHTML:</span> <span style="color:rgb(206,145,120)">'&nbsp;'</span></div><div>          }),</div><div>          <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(156,220,254)">control</span>.<span style="color:rgb(220,220,170)">ScaleLine</span>()</div><div>        ]),</div><div>        <span style="color:rgb(156,220,254)">target:</span> <span style="color:rgb(206,145,120)">'map'</span>,</div><div>        <span style="color:rgb(156,220,254)">layers:</span> [<span style="color:rgb(156,220,254)">raster</span>, <span style="color:rgb(156,220,254)">vector</span>],</div><div>        <span style="color:rgb(156,220,254)">view:</span> <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(156,220,254)">ol</span>.<span style="color:rgb(220,220,170)">View</span>({</div><div>          <span style="color:rgb(156,220,254)">center:</span> [<span style="color:rgb(181,206,168)">0</span>, <span style="color:rgb(181,206,168)">0</span>],</div><div>          <span style="color:rgb(156,220,254)">zoom:</span> <span style="color:rgb(181,206,168)">2</span></div><div>        })</div><div>        </div><div>      });</div><div>      <span style="color:rgb(86,156,214)">function</span> <span style="color:rgb(220,220,170)">raster_switch</span>(){</div><div>        <span style="color:rgb(197,134,192)">if</span> (<span style="color:rgb(156,220,254)">raster</span>.<span style="color:rgb(220,220,170)">getVisible</span>()){   <span style="color:rgb(106,153,85)">//si le raster est visible</span></div><div>        <span style="color:rgb(156,220,254)">raster</span>.<span style="color:rgb(220,220,170)">setVisible</span>(<span style="color:rgb(86,156,214)">false</span>)    <span style="color:rgb(106,153,85)">//Nous l'éteignons</span></div><div>        }</div><div>        <span style="color:rgb(197,134,192)">else</span>{</div><div>          <span style="color:rgb(156,220,254)">raster</span>.<span style="color:rgb(220,220,170)">setVisible</span>(<span style="color:rgb(86,156,214)">true</span>)   <span style="color:rgb(106,153,85)">//Sinon nous l'affichons</span></div><div>        }</div><div>      }</div><div>this is my code witch work but if l try to add this code below</div><div>

<div style="line-height:19px"><div><span style="color:rgb(86,156,214)">let</span> <span style="color:rgb(156,220,254)">draw</span>; <span style="color:rgb(106,153,85)">// global so we can remove it later</span></div><div>      <span style="color:rgb(86,156,214)">function</span> <span style="color:rgb(220,220,170)">add_creer</span>(){</div><div>          <span style="color:rgb(156,220,254)">draw</span>= <span style="color:rgb(156,220,254)">new</span>.<span style="color:rgb(220,220,170)">ol</span>.<span style="color:rgb(156,220,254)">interaction</span>.<span style="color:rgb(220,220,170)">Draw</span>({</div><div>            <span style="color:rgb(156,220,254)">source:</span> <span style="color:rgb(156,220,254)">vector</span>.<span style="color:rgb(220,220,170)">getSource</span>(),</div><div>            <span style="color:rgb(156,220,254)">type:</span> <span style="color:rgb(206,145,120)">"Polygon"</span>,</div><div>          });</div><div>          <span style="color:rgb(156,220,254)">map</span>.<span style="color:rgb(220,220,170)">addInteraction</span>(<span style="color:rgb(156,220,254)">draw</span>);</div><div>          <span style="color:rgb(106,153,85)">//appeler snap apres draw</span></div><div>          <span style="color:rgb(220,220,170)">add_snap</span>()</div><div>      }</div></div>
the browser send a blank page if some one can help me to correct this code</div><div>thanks</div></div><div><br></div></div></div>