The World Map

The World Map

Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map.

CODE - 

  <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>

    <link rel="stylesheet" type="text/css" href="">

<title>The World Map</title>

<style>

*{

margin: 0;

padding: 0;

}

#map{

width: 100vw;

height: 100vh;

}

</style>

</head>

<body>

<div id='map'></div>

</body>

<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>

<script>

mapboxgl.accessToken='pk.eyJ1IjoiaGFycnkxMjM0OTgiLCJhIjoiY2s4OXh1c3BqMGFsZzNvbXA3YmYyaGFhYSJ9.wmVMiMxlSqpzJPsj-UXr3Q';

var map = new mapboxgl.Map({

container:'map',

style:'mapbox://styles/mapbox/dark-v10',

zoom:1,

center:[0,20]

});

</script>

</html>

Output :         

 

                                                               When the Project is Run

The INDIA

😍😍😍😍

Watch the video --->