Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                   <body>
        <div class="container">
            <div class="mapcontainer">
                <div class="left">
                    <div class="legend-item" id="neuville">
                        <h3>Neuville sur Saone</h3>
                        <p>Sanofi Pasteur</p>
                        <p>Vaccins</p>
                    </div>
                    <div class="legend-item" id="marcy">
                        <h3>Marcy l'Etoile</h3>
                        <p>Sanofi Pasteur</p>
                        <p>Vaccins</p>
                    </div>
                    <div class="legend-item" id="campus">
                        <h3>Lyon</h3>
                        <p>Campus Sanofi Lyon</p>
                        <p>Siège Mondial Sanofi Pasteur</p>
                        <p>& fonctions support globales Sanofi</p>
                    </div>
                </div>
                <div class="center mapael-map">
                    <div class="map">
                        <span>Alternative content for the map</span>
                    </div>
                </div>
                <div class="right">
                    <div class="legend">
                        <div class="features">
                            <p class="feature_cc-rd">Site de R&D</p>
                            <p class="feature_cc-production">Site de Production</p>
                            <p class="feature_cc-tertiaire">Site Tertiaires</p>
                        </div>

                        <div class="legend-item" id="genzyme">
                            <h3>Lyon</h3>
                            <p>Sanofi Genzyme</p>
                            <p>Médecine de spécialités</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  
              
            
!

CSS

              
                  .mapcontainer {
                max-width: 1200px;
                min-height: 600px;
                background-color: #8e6eab;
               margin: auto;
               display:flex;
               align-items:center;
               justify-content:center;
            }

        
        /* Specific mapael css class are below
         * 'mapael' class is added by plugin
        */

        .mapael .map {
            position: relative;
        }

            .left {
                display: inline-block;
                width:100%;
                max-width: 300px;
               
            }
            .center{
            	display:inline-block;
            	width:100%;
            	max-width:300px;
            	padding-top:100px;
            	

            }
            .map svg{
            	 width: 600.08728px;
                 height: 626.26221px
            }
            .right{
            	display:inline-block;
            	width:100%;
            	max-width:280px;
            	
            }
            .left .legend {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: center;
                
            }
            .right .legend{
            	display:block;
            }

            .legend-item {
                
                color: #ffffff;
            }
            .left .legend-item{
            	text-align:right;
            }
            .right .legend-item{
            	margin-top: 100px;
    			margin-left: 100px;
            }
            .legend-item h3 {
                text-transform: uppercase;
                margin: 10px 0;
                font-family: Arial, sans serif;
                font-size: 1.3em;
            }
            .legend-item p {
                margin: 0;
                font-family: Arial, sans serif;
                font-size: 1em;
            }
            .cc_title {
                font-size: 1rem;
                text-transform: uppercase;
            }

            .mapael .zoomButton {
                background-color: #fff;
                border: 1px solid #ccc;
                color: #000;
                width: 15px;
                height: 15px;
                line-height: 15px;
                text-align: center;
                border-radius: 3px;
                cursor: pointer;
                position: absolute;
                top: 0;
                font-weight: bold;
                left: 10px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .mapael .zoomReset {
                top: 10px;
            }
            .mapael .zoomIn {
                top: 30px;
            }
            .mapael .zoomOut {
                top: 50px;
            }
            .mapael .mapTooltip {
                position: absolute;
                background-color: #474c4b;
                moz-opacity: 0.7;
                opacity: 0.7;
                filter: alpha(opacity=70);
                border-radius: 10px;
                padding: 10px;
                max-width: 200px;
                display: none;
                color: #fff;
            }

            /******************/
            /*******************/

            .active {
                opacity: 1 !important;
            }
            .active-circle{
			    opacity:1 !important;
			    -webkit-transition:all .4s ease;
			    -o-transition:all .4s ease;
			    transition:all .4s ease;
			    stroke-width: 1 !important;
			}

            /******************/
            /******************/
            .features {
                position: relative;
                background-color: #ffffff;
                padding: 20px;
            }
            .features p {
                text-transform: uppercase;
                margin:0;
                font-family: Arial, sans serif;
                font-size: 1.2em;
                font-weight:bold;
            }
            .features p:first-child::before{
			    display: inline-block;
			    content: '';
			    -webkit-border-radius: 0.375rem;
			    border-radius: 0.375rem;
			    height: 0.75rem;
			    width: 0.75rem;
			    margin-right: 0.5rem;
			    background-color: #e30d76 ;           

			}
			 .features p:nth-child(2)::before{
			    display: inline-block;
			    content: '';
			    -webkit-border-radius: 0.375rem;
			    border-radius: 0.375rem;
			    height: 0.75rem;
			    width: 0.75rem;
			    margin-right: 0.5rem;
			    background-color: #4a63ae ;           

			}
				.features p:last-child::before{
			    display: inline-block;
			    content: '';
			    -webkit-border-radius: 0.375rem;
			    border-radius: 0.375rem;
			    height: 0.75rem;
			    width: 0.75rem;
			    margin-right: 0.5rem;
			    background-color: #f47521;         

			}

			  
            .feature_cc-production {
                color: #4a63ae;
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
                cursor: pointer;
                opacity: 0.6;
            }
            .feature_cc-production:hover {
                opacity: 1 !important;
            }

            /*****************/
            .feature_cc-rd {
                color: #e30d76;
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
                cursor: pointer;
                opacity: 0.6;
            }
            .feature_cc-rd:hover {
                opacity: 1 !important;
            }

            /**************/
            .feature_cc-distribution {
                color: #02b196;
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
                cursor: pointer;
                opacity: 0.6;
            }
            .feature_cc-distribution:hover {
                opacity: 1 !important;
            }

            /*******************/
            .feature_cc-tertiaire {
                color: #f47521;
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
                cursor: pointer;
                opacity: 0.6;
            }
            .feature_cc-tertiaire:hover {
                opacity: 1 !important;
            }

            /********************/

            circle.plot {
                z-index: 999999;
                display: block;
            }

       

        
            @media screen and (max-width: 575px) {
                .mapcontainer{
                	display:block;
                	padding:10px;
                	overflow: hidden;
                }
                 .right .legend-item{
	            	margin-top: 0;
	    			margin-left: 0;
	    			padding:20px;
	            }
	              .connection,
                	.related-line {
                    display: none;
                }
                .center{
                	padding-top:40px;
                }
                 .map svg{
            	 width: 200%;
                 
           		 }
           		 .right{
           		 	margin-top: -100px;
           		 	max-width:100%;
           		 }
           		 .left{
           		 	max-width:100%;
           		 }
           		 .center{
           		 	max-width:100%;
           		 }
            }
              
            
!

JS

              
                            (function (factory) {
                if (typeof exports === "object") {
                    // CommonJS
                    module.exports = factory(require("jquery"), require("jquery-mapael"));
                } else if (typeof define === "function" && define.amd) {
                    // AMD. Register as an anonymous module.
                    define(["jquery", "mapael"], factory);
                } else {
                    // Browser globals
                    factory(jQuery, jQuery.mapael);
                }
            })(function ($, Mapael) {
                "use strict";

                $.extend(true, Mapael, {
                    maps: {
                        france_departments: {
                            width: 600.08728,
                            height: 626.26221,
                            getCoords: function (lat, lon) {
                                var xfactor, xoffset, yfactor, yoffset, x, y;
                                // Corse
                                if (lat < 43.1571 && lon > 8.17199) {
                                    xfactor = 43.64246;
                                    xoffset = 181.3452;
                                    x = lon * xfactor + xoffset;

                                    yfactor = -65.77758;
                                    yoffset = 3346.37839;
                                    y = lat * yfactor + yoffset;
                                } else {
                                    xfactor = 45.48385;
                                    xoffset = 220.22005;
                                    x = lon * xfactor + xoffset;

                                    yfactor = -65.97284;
                                    yoffset = 3371.10748;
                                    y = lat * yfactor + yoffset;
                                }
                                return { x: x, y: y };
                            },
                            elems: {
                                "department-69":
                                    "m 433.73,316.51 c -1.23,0.46 -2.5,0.15 -2.78,2.07 -0.74,1.45 -2.37,-0.51 -2.67,-1.28 -0.69,1.49 -2.76,2.38 -3.71,0.45 -1.68,-1.33 -4.39,-0.82 -4.01,1.84 -0.71,1.65 0.63,2.41 1.38,3.48 -2.55,0.77 0.51,1.73 0.61,2.71 -0.41,1.66 -1.38,2.06 -2.7,1.09 -2.04,0.63 -3.43,2.17 -3.25,4.46 0.34,2.11 -3.89,1.45 -1.52,3.28 0.64,0.85 2.57,0.6 1.5,2.34 -0.59,0.49 -3.83,-0.49 -1.93,0.9 1.83,0.38 1.7,2.77 3.5,3.41 0.3,1.24 -1.23,2.13 0.17,3.34 0.85,1.23 3.47,0.4 1.96,2.6 -0.03,1.87 -0.27,3.49 -1.48,4.83 0.06,1.49 3.29,0.29 1.61,2.31 -1.06,1.85 -1.32,4.02 0.45,5.41 1.27,1.35 2.68,3.31 4.18,4.13 1.51,1.5 3.36,-0.41 4.88,1.05 1.7,-0.73 1.49,2.06 2.91,2.19 -1.19,1.71 0.21,5.2 2.42,3.21 1.24,-1.16 2.04,4.15 2.96,1.45 1.23,-1.41 3.83,-2.33 3.98,-4.32 -1.76,-0.7 -2.47,-2.54 -4.09,-3.51 1.84,-0.94 3.53,1.28 4.58,-0.77 1.51,-1.17 4.45,-0.14 5.27,-1.51 0.95,-0.25 2.74,0.97 2.03,-1.03 1.24,-1.85 2.79,-4.63 5.26,-4.54 0.24,-2.22 -3.33,-1.77 -3.23,-3.97 -1.59,-0.5 -1.14,-2.19 0.43,-1.77 0.7,-2.69 -4,-0.18 -5.55,-0.99 -1.61,0.21 -2.66,0.21 -2.4,-1.73 -0.63,-1.95 -1.32,-4.61 -3.64,-4.95 -0.96,0.68 -1.86,1.05 -1.38,-0.57 -0.83,-1.37 -2.55,-0.91 -3.49,-1.92 2.14,-2.03 -0.39,-5.26 0.95,-7.43 1.04,-0.99 -1.1,-2.32 0.59,-3.24 1.49,-1.45 2.32,-4.9 -0.84,-4.45 -2.61,-1.01 0.89,-5.07 -2.78,-5.24 -1.21,-1.33 2.19,-1.14 0.43,-2.68 -0.12,-0.26 -0.3,-0.58 -0.61,-0.66 z",
                            },
                        },
                    },
                });

                return Mapael;
            });

            $(function () {
                $(".mapcontainer").mapael({
                    map: {
                        name: "france_departments",
                        zoom: {
                            
                            maxLevel: 30,
                            init: {
                             latitude: 45.68972017028403,
                            longitude: 5.059707406010299,
                                level: 25,
                            },
                        },
                        defaultPlot: {
                            attrs: {
                                fill: "#b099c5",
                                opacity: 0.3,
                            },
                            attrsHover: {
                                stroke: "#b099c5",
                                "stroke-width": 1,
                                "stroke-linejoin": "round",
                                opacity: 1,
                            },
                        },

                        defaultArea: {
                            attrs: {
                                fill: "#b099c5",
                                stroke: "#b099c5",
                                "stroke-width": 0.2,
                            },
                            attrsHover: {
                                fill: "#b099c5",
                            },

                            text: {
                                attrs: {
                                    fill: "#505444",
                                },
                                attrsHover: {
                                    fill: "#000",
                                },
                            },
                        },
                    } /******** MAP *********/,

                    plots: {
                        neuvilleSurSaone: {
                            type: "circle",
                            size: 2,
                            latitude: 45.8765557,
                            longitude: 4.8395051,
                            value: "1",
                            
                            attrs: {
                                fill: "#4a63ae",
                                stroke: "#4a63ae",
                            },
                            attrsHover: {
                                fill: "#4a63ae",
                                stroke: "#4a63ae",
                            },
                        },
                        "marcy-letoile": {
                            type: "circle",
                            size: 2,
                            latitude: 45.80564887185804,
                            longitude: 4.751302609504244,
                            value: "1",
                            
                            attrs: {
                                fill: "#4a63ae",
                                stroke: "#4a63ae",
                            },
                            attrsHover: {
                                fill: "#4a63ae",
                                stroke: "#4a63ae",
                            },
                        },
                        marcyEtoile: {
                            type: "circle",
                            size: 2,
                            latitude: 45.777247,
                            longitude: 4.7063141,
                            value: "2",
                           
                            attrs: {
                                fill: "#e30d76",
                                stroke: "#e30d76",
                            },
                            attrsHover: {
                                fill: "#e30d76",
                                stroke: "#e30d76",
                            },
                        },
                        sanofiGenzyme: {
                            type: "circle",
                            size: 2,
                            latitude: 45.68813583470042,
                            longitude: 4.878416917037236,
                            value: "1",
                           
                            attrs: {
                                fill: "#4a63ae",
                                stroke: "#4a63ae",
                            },
                            attrsHover: {
                                fill: "#4a63ae",
                                stroke: "#4a63ae",
                            },
                        },
                        CampusLyon: {
                            type: "circle",
                            size: 2,
                            latitude: 45.717644255054836,
                            longitude: 4.844675534909011,
                            value: "3",
                            
                            attrs: {
                                fill: "#f47521",
                                stroke: "#f47521",
                            },
                            attrsHover: {
                                fill: "#f47521",
                                stroke: "#f47521",
                            },
                        },
                    },
                });
                // Add some plots on the map
                // 1-PRODUCTION-----------blue: #4a63ae ;
                // 2-R&D ---------Pink: #e30d76 ;
                // 3-TERTIAIRE -----------orange: #f47521
                // 4-DISRIBUTION ---------grenn: #02b196;

                /* JQUERY CONNECTIONS JS PLUGIN */

                (function ($) {
                    $.fn.connections = function (options) {
                        if (options === "update") {
                            return processConnections(update, this);
                        } else if (options === "remove") {
                            return processConnections(destroy, this);
                        } else {
                            options = $.extend(
                                true,
                                {
                                    borderClasses: {},
                                    class: "connection",
                                    css: {},
                                    from: this,
                                    tag: "connection",
                                    to: this,
                                    within: ":root",
                                },
                                options
                            );
                            connect(options);
                            return this;
                        }
                    };

                    $.event.special.connections = {
                        teardown: function (namespaces) {
                            processConnections(destroy, $(this));
                        },
                    };

                    var connect = function (options) {
                        var borderClasses = options.borderClasses;
                        var tag = options.tag;
                        var end1 = $(options.from);
                        var end2 = $(options.to);
                        var within = $(options.within);
                        delete options.borderClasses;
                        delete options.tag;
                        delete options.from;
                        delete options.to;
                        delete options.within;
                        within.each(function () {
                            var container = this;
                            var done = new Array();
                            end1.each(function () {
                                var node = this;
                                done.push(this);
                                end2.not(done).each(function () {
                                    createConnection(container, [node, this], tag, borderClasses, options);
                                });
                            });
                        });
                    };

                    var createConnection = function (container, nodes, tag, borderClasses, options) {
                        var css = $.extend({ position: "absolute" }, options.css);
                        var connection = $("<" + tag + "/>", options).css(css);
                        connection.appendTo(container);

                        var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
                        var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;

                        if (border_w <= 0 && border_h <= 0) {
                            border_w = border_h = 1;
                        }

                        var data = {
                            borderClasses: borderClasses,
                            border_h: border_h,
                            border_w: border_w,
                            node_from: $(nodes[0]),
                            node_to: $(nodes[1]),
                            nodes_dom: nodes,
                            css: css,
                        };

                        if ("none" === connection.css("border-top-style")) {
                            data.css.borderStyle = "solid";
                        }
                        $.data(connection.get(0), "connection", data);
                        $.data(connection.get(0), "connections", [connection.get(0)]);
                        for (var i = 0; i < 2; i++) {
                            var connections = connection.add($.data(nodes[i], "connections")).get();
                            $.data(nodes[i], "connections", connections);
                            if (connections.length == 1) {
                                $(nodes[i]).on("connections.connections", false);
                            }
                        }
                        update(connection.get(0));
                    };

                    var destroy = function (connection) {
                        var nodes = $.data(connection, "connection").nodes_dom;
                        for (var i = 0; i < 2; i++) {
                            var connections = $($.data(nodes[i], "connections")).not(connection).get();
                            $.data(nodes[i], "connections", connections);
                        }
                        $(connection).remove();
                    };

                    var getState = function (data) {
                        data.rect_from = data.nodes_dom[0].getBoundingClientRect();
                        data.rect_to = data.nodes_dom[1].getBoundingClientRect();
                        var cached = data.cache;
                        data.cache = [data.rect_from.top, data.rect_from.right, data.rect_from.bottom, data.rect_from.left, data.rect_to.top, data.rect_to.right, data.rect_to.bottom, data.rect_to.left];
                        data.hidden = 0 === (data.cache[0] | data.cache[1] | data.cache[2] | data.cache[3]) || 0 === (data.cache[4] | data.cache[5] | data.cache[6] | data.cache[7]);
                        data.unmodified = true;
                        if (cached === undefined) {
                            return (data.unmodified = false);
                        }
                        for (var i = 0; i < 8; i++) {
                            if (cached[i] !== data.cache[i]) {
                                return (data.unmodified = false);
                            }
                        }
                    };

                    var update = function (connection) {
                        var data = $.data(connection, "connection");
                        getState(data);
                        if (data.unmodified) {
                            return;
                        }
                        var border_h = data.border_h;
                        var border_w = data.border_w;
                        var from = data.rect_from;
                        var to = data.rect_to;
                        var b = (from.bottom + from.top) / 2;
                        var r = (to.left + to.right) / 2;
                        var t = (to.bottom + to.top) / 2;
                        var l = (from.left + from.right) / 2;

                        var h = ["right", "left"];
                        if (l > r) {
                            h = ["left", "right"];
                            var x = Math.max(r - border_w / 2, Math.min(from.right, to.right));
                            r = l + border_w / 2;
                            l = x;
                        } else {
                            l -= border_w / 2;
                            r = Math.min(r + border_w / 2, Math.max(from.left, to.left));
                        }
                        var v = ["bottom", "top"];
                        if (t > b) {
                            v = ["top", "bottom"];
                            var x = Math.max(b - border_h / 2, Math.min(from.bottom, to.bottom));
                            b = t + border_h / 2;
                            t = x;
                        } else {
                            b = Math.min(b, Math.max(from.top, to.top));
                            t -= border_h / 2;
                        }
                        var width = r - l;
                        var height = b - t;
                        if (width < border_w) {
                            t = Math.max(t, Math.min(from.bottom, to.bottom));
                            b = Math.min(b, Math.max(from.top, to.top));
                            l = Math.max(from.left, to.left);
                            r = Math.min(from.right, to.right);
                            r = l = (l + r - border_w) / 2;
                        }
                        if (height < border_h) {
                            l = Math.max(l, Math.min(from.right, to.right));
                            r = Math.min(r, Math.max(from.left, to.left));
                            t = Math.max(from.top, to.top);
                            b = Math.min(from.bottom, to.bottom);
                            b = t = (t + b - border_h) / 2;
                        }
                        width = r - l;
                        height = b - t;
                        width <= 0 && (border_h = 0);
                        height <= 0 && (border_w = 0);
                        var style = "border-" + v[0] + "-" + h[0] + "-radius: 0;" + "border-" + v[0] + "-" + h[1] + "-radius: 0;" + "border-" + v[1] + "-" + h[0] + "-radius: 0;";
                        (border_h <= 0 || border_w <= 0) && (style += "border-" + v[1] + "-" + h[1] + "-radius: 0;");
                        if (data.hidden) {
                            style += "display: none;";
                        } else {
                            data.css["border-" + v[0] + "-width"] = 0;
                            data.css["border-" + h[0] + "-width"] = 0;
                            data.css["border-" + v[1] + "-width"] = border_h;
                            data.css["border-" + h[1] + "-width"] = border_w;
                            var current_rect = connection.getBoundingClientRect();
                            data.css.left = connection.offsetLeft + l - current_rect.left;
                            data.css.top = connection.offsetTop + t - current_rect.top;
                            data.css.width = width - border_w;
                            data.css.height = height - border_h;
                        }
                        var bc = data.borderClasses;
                        $(connection).removeClass(bc[v[0]]).removeClass(bc[h[0]]).addClass(bc[v[1]]).addClass(bc[h[1]]).attr("style", style).css(data.css);
                    };

                    var processConnections = function (method, elements) {
                        return elements.each(function () {
                            var connections = $.data(this, "connections");
                            if (connections instanceof Array) {
                                for (var i = 0, len = connections.length; i < len; i++) {
                                    method(connections[i]);
                                }
                            }
                        });
                    };
                })(jQuery);

                $(".feature_cc-tertiaire").hover(function () {
                    $(this).toggleClass("active");
                    $(this).siblings().removeClass("active");
                    $("svg circle").not($('svg circle[fill="#f47521"]')).removeClass("active-circle");
                    $('svg circle[fill="#f47521"]').toggleClass("active-circle");
                });

                $(".feature_cc-rd").hover(function () {
                    $(this).toggleClass("active");
                    $(this).siblings().removeClass("active");
                    $("svg circle").not($('svg circle[fill="#e30d76"]')).removeClass("active-circle");
                    $('svg circle[fill="#e30d76"]').toggleClass("active-circle");
                });

                $(".feature_cc-distribution").hover(function () {
                    $(this).toggleClass("active");
                    $(this).siblings().removeClass("active");
                    $("svg circle").not($('svg circle[fill="#02b196"]')).removeClass("active-circle");
                    $('svg circle[fill="#02b196"]').toggleClass("active-circle");
                });

                $(".feature_cc-production").hover(function () {
                    $(this).toggleClass("active");
                    $(this).siblings().removeClass("active");
                    $("svg circle").not($('svg circle[fill="#4a63ae"]')).removeClass("active-circle");
                    $('svg circle[fill="#4a63ae"]').toggleClass("active-circle");
                });

                $('circle[data-id="neuvilleSurSaone"]').connections({ to: "#neuville", css: { border: "2px dotted #ffffff", opacity: 0.5 } });
                $('circle[data-id="marcyEtoile"]').connections({ to: "#marcy", css: { border: "2px dotted #ffffff", opacity: 0.5 } });
                $('circle[data-id="CampusLyon"]').connections({ to: "#campus", css: { border: "2px dotted #ffffff", opacity: 0.5 } });

                $('circle[data-id="sanofiGenzyme"]').connections({ to: "#genzyme", css: { border: "2px dotted #ffffff", opacity: 0.5 } });
                var c = $("connection");
                setInterval(function () {
                    c.connections("update");
                });
            });
              
            
!
999px

Console