To embed this map, add the following code snippet and customize its properties (scrolling, width, height) based on your needs to your site:

<iframe scrolling="yes" src="http://www.ethionsdi.gov.et/maps/482/embed" width="480px" height="360px"></iframe>

To embed this map, copy the following code snippet into your own page:

<div class="map-container">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4-src.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var wmsLayer = null;

            var map = L.map('map').setView([8.96582192125, 38.8858319859], 11.0);
            var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            });
            map.addLayer(osm);

            var bbox = [38.714169238238654, 9.07355073790056, 39.05749473359768, 8.858093104590553];

            zoom_to_box(map, bbox);

            
                var layer_url = 'http://www.ethionsdi.gov.et/geoserver/ows';
                var options = {
                    format: 'image/png',
                    transparent: true,
                    layers: 'geonode:addis_ababa_woreda_1',
                    opacity: 0.8
                };
                if (layer_url.includes('{z}') && layer_url.includes('{y}') && layer_url.includes('{x}')) {
                    wmsLayer = L.tileLayer(layer_url, options);
                }
                else {
                    wmsLayer = L.tileLayer.wms(layer_url, options);
                }
                if (wmsLayer != null) {
                    map.addLayer(wmsLayer);
                }
            
                var layer_url = 'http://www.ethionsdi.gov.et/geoserver/ows';
                var options = {
                    format: 'image/png',
                    transparent: true,
                    layers: 'geonode:aa_streetnew',
                    opacity: 0.8
                };
                if (layer_url.includes('{z}') && layer_url.includes('{y}') && layer_url.includes('{x}')) {
                    wmsLayer = L.tileLayer(layer_url, options);
                }
                else {
                    wmsLayer = L.tileLayer.wms(layer_url, options);
                }
                if (wmsLayer != null) {
                    map.addLayer(wmsLayer);
                }
            
                var layer_url = 'http://www.ethionsdi.gov.et/geoserver/ows';
                var options = {
                    format: 'image/png',
                    transparent: true,
                    layers: 'geonode:addis_ababa_low_income_blocks',
                    opacity: 0.8
                };
                if (layer_url.includes('{z}') && layer_url.includes('{y}') && layer_url.includes('{x}')) {
                    wmsLayer = L.tileLayer(layer_url, options);
                }
                else {
                    wmsLayer = L.tileLayer.wms(layer_url, options);
                }
                if (wmsLayer != null) {
                    map.addLayer(wmsLayer);
                }
            
                var layer_url = 'http://www.ethionsdi.gov.et/geoserver/ows';
                var options = {
                    format: 'image/png',
                    transparent: true,
                    layers: 'geonode:foodstore_new',
                    opacity: 0.8
                };
                if (layer_url.includes('{z}') && layer_url.includes('{y}') && layer_url.includes('{x}')) {
                    wmsLayer = L.tileLayer(layer_url, options);
                }
                else {
                    wmsLayer = L.tileLayer.wms(layer_url, options);
                }
                if (wmsLayer != null) {
                    map.addLayer(wmsLayer);
                }
            
        });

        function zoom_to_box(map, bbox) {
            var bounds = [
                [bbox[1], bbox[0]],
                [bbox[3], bbox[2]]
            ];
        }
    </script>
    <style type="text/css">
        #map {
            height: 800px;
        }
    </style>
    <div id="map"></div>
</div>