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

my profile code by html || shutter animation with hover effect of html-css

                                              My Profile Viewer #CODE :       <!-- Created By Aziz Sobirov --> <!DOCTYPE html> <html>     <head>     <meta name="viewport" content="width=device-width, initial-scale=1" />      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">         <title>Img hover</title>         <style type="text/css">           *{     margin:0;     padding:0;    ...
Post a Comment
Read more

Hide Animation with Hover

How to Hide the Text by HTML with the Hover Effect  So, The Html-Css are the one by using you can bring the change. A lots of Design and Animations you can make through coding.      Here, I done with the Hide Text code, In which The text hide with the mouse pointer and with Animation. It also in the categories of MouseMove Operation. Just do it once and expand your knowledge with codoblog. #CODE                                                     <html>  <head>  <meta name="viewport" content="width=device-width, initial-scale=1" >   <style type="text/css">   body{   margin: 0;   padding: 0;   min-width: 100vh;   width: 100%;   display: flex;   align-items:center;   j...
Post a Comment
Read more

How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text || #CODE :                 Barcode.html ==>        <html>        <head>            <title>Barcode Generator</title>            <link rel="stylesheet" href="Barcode.css">     </head>     <body>         <div>Barcode Generator</div>         <input type="text" placeholder="Type..."/>         <button onclick="generate()">Generate Barcode</button>           <svg id="barcode"></svg>           <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>           <script>     ...
Post a Comment
Read more