Skip to main content

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 --->




Labels:

Comments

Post a Comment

The Most Populer

Random Captcha Generator

 How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html>     <html>         <head>             <title></title>         </head>         <body>             <canvas width=150 height=70 style="border:1px solid black;"></canvas><br>             <button style="width:150px;             height:40px;             color: red;             -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button>             <style type="text/css">                 body{     ...
Post a Comment
Read more

Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon  Here is the code for camera icon design..try with your efforts..! ICON #CODE : >>                <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{     width: 50%;     height: 100vh;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto; } .body{     background-color: white;     border-radius: 30%;     width: 11rem;     height: 11rem;     position: relative;     box-shadow: 1px 1px 6px 1px slategrey; } .red{     border-radius: 50%;     background-color: crimson;     width: 10px;     height: 10px;     position: absolute;     ...
Post a Comment
Read more