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

SideBar PLUS Icon with animation

SideBar PLUS Icon with Animation || POP UP icon Box || Icon Interaction in HTML                      Here is the best code for pop up icon box with the animation effect. These icons will be use in the many website for users attraction. Do the code now..! #CODE : --     <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             * {     margin: 0;     padding: 0;     box-sizing: border-box; } body {     display: flex;     justify-content: center;     align-items: center;     min-height: 100vh;     --light-color: #f8f9fd;     background: #FF6347; } .container {     position: relative;     display: flex;     flex-wrap: wrap; ...
Post a Comment
Read more

create a NOTE app by HTML-JS | Design for note app | App challenge

 CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI Hello There..! Here is the sticky note app code of html . 👇👇👇👇👇👇 <!DOCTYPE html> <html>     <head>         <title>Clock + to-do app</title>         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         <script type="text/javascript">           function app(){ var today = new Date(); var date = today.getDate(); var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var month = montharr[today.getMonth()]; var year = today.getFullYear(); $("#date").text(date + " " + month + "," + " " + year); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var ampm = ""; if(h...
Post a Comment
Read more