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

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

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

Android Logo Design

                    Android Logo Design By Html-Css                                                                                 Here is the code for designing the logo of Android. Design the logo by using programming language like Html and Css. You can simply design the logo, just small code for it. Don't hasitate and start to write it.. CODE :                 <!DOCTYPE html> <html> <head> <title>Android logo</title> <link href="https://fonts.googleapis.com/css2?family=Piedra&display=swap" rel="stylesheet"> <style type="text/css"> body{ background-color: black; } h4{ text-alig...
Post a Comment
Read more